doc: update flutter.md (#179)

* doc: update flutter.md

* doc: update flutter.md 0a4bd03900
This commit is contained in:
jaywcjlove
2022-11-27 09:18:21 +00:00
parent 3b190de181
commit 0d55b4fcb5
4 changed files with 103 additions and 4 deletions

View File

@ -42,7 +42,7 @@
<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">
<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><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><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#container">Container</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#column">Column</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#row">Row</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#wrap">Wrap</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#stack">Stack</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#positioned">Positioned</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#align">Align</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#center">Center</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><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#container">Container</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#column">Column</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#row">Row</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#wrap">Wrap</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#stack">Stack</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#positioned">Positioned</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#align">Align</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#center">Center</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#flex">Flex</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#expaneded">Expaneded</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#flexible">Flexible</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#spacer">Spacer</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">
<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>
@ -544,6 +544,105 @@
</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"><div class="wrap-header h3wrap"><h3 id="flex"><a aria-hidden="true" tabindex="-1" href="#flex"><span class="icon icon-link"></span></a>Flex</h3><div class="wrap-body">
<p>Flex 的用法与Row或Column类似但只需要额外传入direction参数。
Row 和 Column组件都继承Flex组件。
设置direction 为Axis.horizontal 表示水平方向(Row)为Axis.vertical则为垂直方向(Column)。</p>
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// 垂直方向依次摆放3个flutter logo</span>
</span><span class="code-line"><span class="token class-name">Flex</span><span class="token punctuation">(</span>
</span><span class="code-line"> direction<span class="token punctuation">:</span> <span class="token class-name">Axis</span><span class="token punctuation">.</span>vertiacl<span class="token punctuation">,</span>
</span><span class="code-line"> children<span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token class-name">Fluterlogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token class-name">Fluterlogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token class-name">Fluterlogo</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><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token comment">// 水平方向依次摆放3个flutter logo</span>
</span><span class="code-line"><span class="token class-name">Flex</span><span class="token punctuation">(</span>
</span><span class="code-line"> dirction<span class="token punctuation">:</span> <span class="token class-name">Axis</span><span class="token punctuation">.</span>horizontal<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">Flutterlogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token class-name">Flutterlogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token class-name">Flutterlogo</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><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="expaneded"><a aria-hidden="true" tabindex="-1" href="#expaneded"><span class="icon icon-link"></span></a>Expaneded</h3><div class="wrap-body">
<p>Expanded 用于扩张一个子组件。可以通过flex属性用于表示该组件相对其他弹性组件放大的倍数(可以理解为一个权重)。</p>
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// Container 会占满剩余的全部空用空间</span>
</span><span class="code-line"><span class="token class-name">Row</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">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token class-name">Expanded</span><span class="token punctuation">(</span>
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</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>green<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 class-name">FlutterLogo</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><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 comment">// 按照1:2 的比例分配一整行的空间</span>
</span><span class="code-line"><span class="token class-name">Row</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">Expanded</span><span class="token punctuation">(</span>
</span><span class="code-line"> flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</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>green<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 class-name">Expanded</span><span class="token punctuation">(</span>
</span><span class="code-line"> flex<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</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"> <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>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="flexible"><a aria-hidden="true" tabindex="-1" href="#flexible"><span class="icon icon-link"></span></a>Flexible</h3><div class="wrap-body">
<p>Flexible 是Expanded组件的父类。
与Expanded不同的是Flexible可以通过fit属性设置子控件是否必须占满Flexibal扩展的空间。而Expaned默认子控件必须占满。</p>
<p>将Flexible的fit属性设置为tingt就等价于使用Expanded。</p>
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// 如果将fit设置为tight</span>
</span><span class="code-line"><span class="token comment">// 则绿色Container 和蓝色Container大小一样。</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// 如果将fit设置为loose</span>
</span><span class="code-line"><span class="token comment">// 则两个Flexible扩展的空间大小是一样的</span>
</span><span class="code-line"><span class="token comment">// 但绿色Container并不会填充整个扩展的空间。</span>
</span><span class="code-line"><span class="token class-name">Row</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">Flexible</span><span class="token punctuation">(</span>
</span><span class="code-line"> flex<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token comment">// fit: FlexFit.tight,</span>
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</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>green<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 class-name">Expanded</span><span class="token punctuation">(</span>
</span><span class="code-line"> flex<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</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"> <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>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="spacer"><a aria-hidden="true" tabindex="-1" href="#spacer"><span class="icon icon-link"></span></a>Spacer</h3><div class="wrap-body">
<p>Spacer 用于在布局中留白。例如,需要文本和图标位于一个行的两端,而中间留白时。就可以使用Spacer。</p>
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Row</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">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'Item'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token class-name">Spacer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token class-name">FlutterLogo</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><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">
<ul>
<li><a href="./dart.html">Dart 备忘清单</a> <em>(jaywcjlove.github.io)</em></li>