mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-19 13:41:21 +08:00
doc: update flutter.md #58 #149 0148846d7e
This commit is contained in:
jaywcjlove
@ -40,7 +40,7 @@
|
|||||||
<p>包含 Flutter 常用的组件、布局、方法等。初学者的完整快速参考</p>
|
<p>包含 Flutter 常用的组件、布局、方法等。初学者的完整快速参考</p>
|
||||||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||||||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||||||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#macos-操作系统上安装和配置">macOS 操作系统上安装和配置</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#获取-flutter-sdk">获取 Flutter SDK</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#windows-操作系统上安装和配置">Windows 操作系统上安装和配置</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#macos-操作系统上安装和配置">macOS 操作系统上安装和配置</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#获取-flutter-sdk">获取 Flutter SDK</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#windows-操作系统上安装和配置">Windows 操作系统上安装和配置</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#基础组件">基础组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#text-样式文本">Text 样式文本</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#textstyle-指定文本显示的样式">TextStyle 指定文本显示的样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#textspan-文本的一个片段">TextSpan 文本的一个“片段”</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#defaulttextstyle-文本默认样式">DefaultTextStyle 文本默认样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#字体">字体</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#elevatedbutton-漂浮按钮">ElevatedButton "漂浮"按钮</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#textbutton-文本按钮">TextButton 文本按钮</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#outlinebutton-边框阴影且背景透明按钮">OutlineButton 边框阴影且背景透明按钮</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#iconbutton-可点击的图标按钮">IconButton 可点击的图标按钮</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#带图标的按钮">带图标的按钮</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#从-asset-中加载图片">从 asset 中加载图片</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#从网络加载图片">从网络加载图片</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#image-参数">Image 参数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#switch-单选开关">Switch 单选开关</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#checkbox-复选框">Checkbox 复选框</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#textfield-文本输入框">TextField 文本输入框</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#linearprogressindicator-线性条状的进度条">LinearProgressIndicator 线性、条状的进度条</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#circularprogressindicator-圆形进度条">CircularProgressIndicator 圆形进度条</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#自定义尺寸">自定义尺寸</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="macos-操作系统上安装和配置"><a aria-hidden="true" tabindex="-1" href="#macos-操作系统上安装和配置"><span class="icon icon-link"></span></a>macOS 操作系统上安装和配置</h3><div class="wrap-body">
|
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="macos-操作系统上安装和配置"><a aria-hidden="true" tabindex="-1" href="#macos-操作系统上安装和配置"><span class="icon icon-link"></span></a>macOS 操作系统上安装和配置</h3><div class="wrap-body">
|
||||||
<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">sudo</span> softwareupdate --install-rosetta --agree-to-license
|
<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">sudo</span> softwareupdate --install-rosetta --agree-to-license
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -98,6 +98,293 @@
|
|||||||
<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">C:<span class="token punctuation">\</span>src<span class="token operator">></span>git clone https://github.com/flutter/flutter.git <span class="token parameter variable">-b</span> stable
|
<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">C:<span class="token punctuation">\</span>src<span class="token operator">></span>git clone https://github.com/flutter/flutter.git <span class="token parameter variable">-b</span> stable
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<!--rehype:className=wrap-text-->
|
<!--rehype:className=wrap-text-->
|
||||||
|
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="基础组件"><a aria-hidden="true" tabindex="-1" href="#基础组件"><span class="icon icon-link"></span></a>基础组件</h2><div class="wrap-body">
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="text-样式文本"><a aria-hidden="true" tabindex="-1" href="#text-样式文本"><span class="icon icon-link"></span></a>Text 样式文本</h3><div class="wrap-body">
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Hello world"</span></span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> textAlign<span class="token punctuation">:</span> <span class="token class-name">TextAlign</span><span class="token punctuation">.</span>left<span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line">
|
||||||
|
</span><span class="code-line"><span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Hello world! I'm Jack. "</span></span><span class="token operator">*</span><span class="token number">4</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> maxLines<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> overflow<span class="token punctuation">:</span> <span class="token class-name">TextOverflow</span><span class="token punctuation">.</span>ellipsis<span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line">
|
||||||
|
</span><span class="code-line"><span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Hello world"</span></span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> textScaleFactor<span class="token punctuation">:</span> <span class="token number">1.5</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="textstyle-指定文本显示的样式"><a aria-hidden="true" tabindex="-1" href="#textstyle-指定文本显示的样式"><span class="icon icon-link"></span></a>TextStyle 指定文本显示的样式</h3><div class="wrap-body">
|
||||||
|
<pre class="wrap-text"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Hello world"</span></span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> fontSize<span class="token punctuation">:</span> <span class="token number">18.0</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">1.2</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> fontFamily<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"Courier"</span></span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> background<span class="token punctuation">:</span> <span class="token class-name">Paint</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token punctuation">.</span>color<span class="token operator">=</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>yellow<span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> decoration<span class="token punctuation">:</span><span class="token class-name">TextDecoration</span><span class="token punctuation">.</span>underline<span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> decorationStyle<span class="token punctuation">:</span> <span class="token class-name">TextDecorationStyle</span><span class="token punctuation">.</span>dashed
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<!--rehype:className=wrap-text-->
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="textspan-文本的一个片段"><a aria-hidden="true" tabindex="-1" href="#textspan-文本的一个片段"><span class="icon icon-link"></span></a>TextSpan 文本的一个“片段”</h3><div class="wrap-body">
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Text</span><span class="token punctuation">.</span><span class="token function">rich</span><span class="token punctuation">(</span><span class="token class-name">TextSpan</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||||
|
</span><span class="code-line"> <span class="token class-name">TextSpan</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> text<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"Home: "</span></span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> <span class="token class-name">TextSpan</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> text<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"https://flutter.dev"</span></span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> recognizer<span class="token punctuation">:</span> _tapRecognizer
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">]</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist row-span-4"><div class="wrap-header h3wrap"><h3 id="defaulttextstyle-文本默认样式"><a aria-hidden="true" tabindex="-1" href="#defaulttextstyle-文本默认样式"><span class="icon icon-link"></span></a>DefaultTextStyle 文本默认样式</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-4-->
|
||||||
|
<pre class="wrap-text"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">DefaultTextStyle</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> <span class="token comment">// 1.设置文本默认样式 </span>
|
||||||
|
</span><span class="code-line"> style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> color<span class="token punctuation">:</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> fontSize<span class="token punctuation">:</span> <span class="token number">20.0</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> textAlign<span class="token punctuation">:</span> <span class="token class-name">TextAlign</span><span class="token punctuation">.</span>start<span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Column</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> crossAxisAlignment<span class="token punctuation">:</span> <span class="token class-name">CrossAxisAlignment</span><span class="token punctuation">.</span>start<span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token generics"><span class="token punctuation"><</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span><span class="token punctuation">[</span>
|
||||||
|
</span><span class="code-line"> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"hello world"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"I am Jack"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"I am Jack"</span></span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> inherit<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//2.不继承默认样式</span>
|
||||||
|
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<!--rehype:className=wrap-text-->
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist row-span-4"><div class="wrap-header h3wrap"><h3 id="字体"><a aria-hidden="true" tabindex="-1" href="#字体"><span class="icon icon-link"></span></a>字体</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-4-->
|
||||||
|
<ul class="style-timeline">
|
||||||
|
<li>
|
||||||
|
<p>在 asset 中声明，要先在 <code>pubspec.yaml</code> 中声明它</p>
|
||||||
|
<pre class="language-yaml"><code class="language-yaml code-highlight"><span class="code-line"><span class="token key atrule">flutter</span><span class="token punctuation">:</span>
|
||||||
|
</span><span class="code-line"> <span class="token key atrule">fonts</span><span class="token punctuation">:</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">-</span> <span class="token key atrule">family</span><span class="token punctuation">:</span> Raleway
|
||||||
|
</span><span class="code-line"> <span class="token key atrule">fonts</span><span class="token punctuation">:</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">-</span> <span class="token key atrule">asset</span><span class="token punctuation">:</span> assets/fonts/Raleway<span class="token punctuation">-</span>Regular.ttf
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">-</span> <span class="token key atrule">asset</span><span class="token punctuation">:</span> assets/fonts/Raleway<span class="token punctuation">-</span>Medium.ttf
|
||||||
|
</span><span class="code-line"> <span class="token key atrule">weight</span><span class="token punctuation">:</span> <span class="token number">500</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">-</span> <span class="token key atrule">asset</span><span class="token punctuation">:</span> assets/fonts/Raleway<span class="token punctuation">-</span>SemiBold.ttf
|
||||||
|
</span><span class="code-line"> <span class="token key atrule">weight</span><span class="token punctuation">:</span> <span class="token number">600</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">-</span> <span class="token key atrule">family</span><span class="token punctuation">:</span> AbrilFatface
|
||||||
|
</span><span class="code-line"> <span class="token key atrule">fonts</span><span class="token punctuation">:</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">-</span> <span class="token key atrule">asset</span><span class="token punctuation">:</span> assets/fonts/abrilfatface/AbrilFatface<span class="token punctuation">-</span>Regular.ttf
|
||||||
|
</span></code></pre>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>将字体文件复制到在 <code>pubspec.yaml</code> 中指定的位置</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>使用字体</p>
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// 声明文本样式</span>
|
||||||
|
</span><span class="code-line"><span class="token keyword">const</span> textStyle <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> fontFamily<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">'Raleway'</span></span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line"><span class="token comment">// 使用文本样式</span>
|
||||||
|
</span><span class="code-line"><span class="token keyword">var</span> buttonText <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> <span class="token string-literal"><span class="token string">"Use the font for this text"</span></span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> style<span class="token punctuation">:</span> textStyle<span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!--rehype:className=style-timeline-->
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="elevatedbutton-漂浮按钮"><a aria-hidden="true" tabindex="-1" href="#elevatedbutton-漂浮按钮"><span class="icon icon-link"></span></a>ElevatedButton "漂浮"按钮</h3><div class="wrap-body">
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">ElevatedButton</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"normal"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="textbutton-文本按钮"><a aria-hidden="true" tabindex="-1" href="#textbutton-文本按钮"><span class="icon icon-link"></span></a>TextButton 文本按钮</h3><div class="wrap-body">
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">TextButton</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"normal"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="outlinebutton-边框阴影且背景透明按钮"><a aria-hidden="true" tabindex="-1" href="#outlinebutton-边框阴影且背景透明按钮"><span class="icon icon-link"></span></a>OutlineButton 边框阴影且背景透明按钮</h3><div class="wrap-body">
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">OutlineButton</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"normal"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="iconbutton-可点击的图标按钮"><a aria-hidden="true" tabindex="-1" href="#iconbutton-可点击的图标按钮"><span class="icon icon-link"></span></a>IconButton 可点击的图标按钮</h3><div class="wrap-body">
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">IconButton</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>thumb_up<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="带图标的按钮"><a aria-hidden="true" tabindex="-1" href="#带图标的按钮"><span class="icon icon-link"></span></a>带图标的按钮</h3><div class="wrap-body">
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">ElevatedButton</span><span class="token punctuation">.</span><span class="token function">icon</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>send<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> label<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"发送"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> _onPressed<span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token class-name">OutlineButton</span><span class="token punctuation">.</span><span class="token function">icon</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>add<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> label<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"添加"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> _onPressed<span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token class-name">TextButton</span><span class="token punctuation">.</span><span class="token function">icon</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>info<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> label<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"详情"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> _onPressed<span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="从-asset-中加载图片"><a aria-hidden="true" tabindex="-1" href="#从-asset-中加载图片"><span class="icon icon-link"></span></a>从 asset 中加载图片</h3><div class="wrap-body">
|
||||||
|
<ul class="style-timeline">
|
||||||
|
<li>
|
||||||
|
<p>在工程根目录下创建一个<code>images目录</code>，并将图片 <code>aaa.png</code> 拷贝到该目录。</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>在 <code>pubspec.yaml</code> 中的 <code>flutter</code> 部分添加如下内容：</p>
|
||||||
|
<pre class="language-yaml"><code class="language-yaml code-highlight"><span class="code-line"><span class="token key atrule">assets</span><span class="token punctuation">:</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">-</span> images/aaa.png
|
||||||
|
</span></code></pre>
|
||||||
|
<p>注意: 由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处 assets 前面应有两个空格。</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>加载该图片</p>
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Image</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> image<span class="token punctuation">:</span> <span class="token class-name">AssetImage</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"images/aaa.png"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">100.0</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>Image 也提供了一个快捷的构造函数 <code>Image.asset</code> 用于从 <code>asset</code> 中加载、显示图片：</p>
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">asset</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"images/aaa.png"</span></span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">100.0</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!--rehype:className=style-timeline-->
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="从网络加载图片"><a aria-hidden="true" tabindex="-1" href="#从网络加载图片"><span class="icon icon-link"></span></a>从网络加载图片</h3><div class="wrap-body">
|
||||||
|
<pre class="wrap-text"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Image</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> image<span class="token punctuation">:</span> <span class="token class-name">NetworkImage</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> <span class="token string-literal"><span class="token string">"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">100.0</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<!--rehype:className=wrap-text-->
|
||||||
|
<p>Image 也提供了一个快捷的构造函数 <code>Image.network</code> 用于从网络加载、显示图片：</p>
|
||||||
|
<pre class="wrap-text"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> <span class="token string-literal"><span class="token string">"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"</span></span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">100.0</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<!--rehype:className=wrap-text-->
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="image-参数"><a aria-hidden="true" tabindex="-1" href="#image-参数"><span class="icon icon-link"></span></a>Image 参数</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
|
||||||
|
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>width<span class="token punctuation">,</span> <span class="token comment">// 图片的宽</span>
|
||||||
|
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">,</span> <span class="token comment">// 图片高度</span>
|
||||||
|
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span> <span class="token comment">// 图片的混合色值</span>
|
||||||
|
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>colorBlendMode<span class="token punctuation">,</span> <span class="token comment">// 混合模式</span>
|
||||||
|
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>fit<span class="token punctuation">,</span><span class="token comment">// 缩放模式</span>
|
||||||
|
</span><span class="code-line"> <span class="token comment">// 对齐方式</span>
|
||||||
|
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>alignment <span class="token operator">=</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> <span class="token comment">// 重复方式</span>
|
||||||
|
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>repeat <span class="token operator">=</span> <span class="token class-name">ImageRepeat</span><span class="token punctuation">.</span>noRepeat<span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="switch-单选开关"><a aria-hidden="true" tabindex="-1" href="#switch-单选开关"><span class="icon icon-link"></span></a>Switch 单选开关</h3><div class="wrap-body">
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Switch</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> value<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token comment">//当前状态</span>
|
||||||
|
</span><span class="code-line"> onChanged<span class="token punctuation">:</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line"> <span class="token comment">// 重新构建页面 </span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="checkbox-复选框"><a aria-hidden="true" tabindex="-1" href="#checkbox-复选框"><span class="icon icon-link"></span></a>Checkbox 复选框</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Checkbox</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> value<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> <span class="token comment">// 选中时的颜色</span>
|
||||||
|
</span><span class="code-line"> activeColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> onChanged<span class="token punctuation">:</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="textfield-文本输入框"><a aria-hidden="true" tabindex="-1" href="#textfield-文本输入框"><span class="icon icon-link"></span></a>TextField 文本输入框</h3><div class="wrap-body">
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">TextField</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> autofocus<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> onChanged<span class="token punctuation">:</span> <span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line"> <span class="token function">print</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"onChange: </span><span class="token interpolation"><span class="token punctuation">$</span><span class="token expression">v</span></span><span class="token string">"</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="linearprogressindicator-线性条状的进度条"><a aria-hidden="true" tabindex="-1" href="#linearprogressindicator-线性条状的进度条"><span class="icon icon-link"></span></a>LinearProgressIndicator 线性、条状的进度条</h3><div class="wrap-body">
|
||||||
|
<p>模糊进度条(会执行一个动画)</p>
|
||||||
|
<pre class="wrap-text"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">LinearProgressIndicator</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey<span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> valueColor<span class="token punctuation">:</span> <span class="token class-name">AlwaysStoppedAnimation</span><span class="token punctuation">(</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<!--rehype:className=wrap-text-->
|
||||||
|
<p>进度条显示 <code>50%</code></p>
|
||||||
|
<pre class="wrap-text"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">LinearProgressIndicator</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey<span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> valueColor<span class="token punctuation">:</span> <span class="token class-name">AlwaysStoppedAnimation</span><span class="token punctuation">(</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> value<span class="token punctuation">:</span> <span class="token number">.5</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<!--rehype:className=wrap-text-->
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="circularprogressindicator-圆形进度条"><a aria-hidden="true" tabindex="-1" href="#circularprogressindicator-圆形进度条"><span class="icon icon-link"></span></a>CircularProgressIndicator 圆形进度条</h3><div class="wrap-body">
|
||||||
|
<p>模糊进度条(会执行一个旋转动画)</p>
|
||||||
|
<pre class="wrap-text"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">CircularProgressIndicator</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey<span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> valueColor<span class="token punctuation">:</span> <span class="token class-name">AlwaysStoppedAnimation</span><span class="token punctuation">(</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<!--rehype:className=wrap-text-->
|
||||||
|
<p>进度条显示 <code>50%</code>，会显示一个半圆</p>
|
||||||
|
<pre class="wrap-text"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">CircularProgressIndicator</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey<span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> valueColor<span class="token punctuation">:</span> <span class="token class-name">AlwaysStoppedAnimation</span><span class="token punctuation">(</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> value<span class="token punctuation">:</span> <span class="token number">.5</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<!--rehype:className=wrap-text-->
|
||||||
|
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="自定义尺寸"><a aria-hidden="true" tabindex="-1" href="#自定义尺寸"><span class="icon icon-link"></span></a>自定义尺寸</h3><div class="wrap-body">
|
||||||
|
<p>线性进度条高度指定为 <code>3</code></p>
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">SizedBox</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">LinearProgressIndicator</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey<span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> valueColor<span class="token punctuation">:</span> <span class="token class-name">AlwaysStoppedAnimation</span><span class="token punctuation">(</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> value<span class="token punctuation">:</span> <span class="token number">.5</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>圆形进度条直径指定为 <code>100</code></p>
|
||||||
|
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">SizedBox</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">CircularProgressIndicator</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line"> backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey<span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> valueColor<span class="token punctuation">:</span> <span class="token class-name">AlwaysStoppedAnimation</span><span class="token punctuation">(</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> value<span class="token punctuation">:</span> <span class="token number">.7</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||||
|
</span></code></pre>
|
||||||
</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
|
</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="./dart.html">Dart 备忘清单</a> <em>(jaywcjlove.github.io)</em></li>
|
<li><a href="./dart.html">Dart 备忘清单</a> <em>(jaywcjlove.github.io)</em></li>
|
||||||
|
|||||||
@ -663,7 +663,7 @@
|
|||||||
<!--rehype:class=home-card&style=margin:1.2rem 0;display: flex;justify-content: center;-->
|
<!--rehype:class=home-card&style=margin:1.2rem 0;display: flex;justify-content: center;-->
|
||||||
<p>如果你有资源，可以很方便部署 web 版，这非常简单，只需要克隆 gh-pages 分支代码到你的静态服务就可以了，还可以使用 <a href="https://hub.docker.com/r/wcjiang/reference">docker</a> 快捷部署 web 版。</p>
|
<p>如果你有资源，可以很方便部署 web 版，这非常简单，只需要克隆 gh-pages 分支代码到你的静态服务就可以了，还可以使用 <a href="https://hub.docker.com/r/wcjiang/reference">docker</a> 快捷部署 web 版。</p>
|
||||||
|
|
||||||
</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang. Updated on 2022/11/20 16:38:44</footer></footer><script src="data.js" defer></script><script src="js/fuse.min.js" defer></script><script src="js/main.js" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang. Updated on 2022/11/20 17:20:20</footer></footer><script src="data.js" defer></script><script src="js/fuse.min.js" defer></script><script src="js/main.js" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||||||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||||||
</svg><input id="mysearch-input" type="search"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">取消</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
</svg><input id="mysearch-input" type="search"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">取消</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user