doc: update flutter.md (#175) (#58)

* doc: update flutter.md * doc: modify CONTRIBUTING.md. * doc: modify README.md. Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> 38a704244c
2025-06-18 05:01:21 +08:00 · 2022-11-26 09:20:36 +00:00
parent 5b13c09964
commit dab8c87925
5 changed files with 167 additions and 10 deletions
--- a/CONTRIBUTORS.svg
+++ b/CONTRIBUTORS.svg
--- a/data.js
+++ b/data.js
--- a/data.json
+++ b/data.json
--- a/docs/flutter.html
+++ b/docs/flutter.html
@ -40,7 +40,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></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="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>
@ -385,6 +385,163 @@
 </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-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="container"><a aria-hidden="true" tabindex="-1" href="#container"><span class="icon icon-link"></span></a>Container</h3><div class="wrap-body">
+<p>在实际开发中，Container常常用于对一个组件进行包装修饰。</p>
+<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// 将Contianer大小固定为100 * 100， 背景色为蓝色。</span>
+</span><span class="code-line"><span class="token comment">// 把Text包裹在Container中，并将其居中</span>
+</span><span class="code-line"><span class="token class-name">Container</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">  height<span class="token punctuation">:</span> <span class="token number">100</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">  alignment<span class="token punctuation">:</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<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">'Hello world'</span></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></code></pre>
+</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="column"><a aria-hidden="true" tabindex="-1" href="#column"><span class="icon icon-link"></span></a>Column</h3><div class="wrap-body">
+<p>列布局(Column),可以将多个子组件沿着垂直的方向摆放(竖的摆放)</p>
+<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// 将container 和 button 摆放到同一列。</span>
+</span><span class="code-line"><span class="token class-name">Column</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">Container</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">       height<span class="token punctuation">:</span> <span class="token number">100</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">       alignment<span class="token punctuation">:</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<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">'Hello world'</span></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 class-name">ElevatedButton</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">       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">'Button'</span></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 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="row"><a aria-hidden="true" tabindex="-1" href="#row"><span class="icon icon-link"></span></a>Row</h3><div class="wrap-body">
+<p>行布局(Row)，可以将多个组件沿水平的方向摆放。</p>
+<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// 在同一行摆放3个Button</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">ElevatedButton</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">      child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'1'</span></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 class-name">ElevatedButton</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">      child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'2'</span></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 class-name">ElevatedButton</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">      child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'3'</span></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 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="wrap"><a aria-hidden="true" tabindex="-1" href="#wrap"><span class="icon icon-link"></span></a>Wrap</h3><div class="wrap-body">
+<p>将子组件从左到右依次排列，当空间不足时自动换行。</p>
+<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// 显示多个Flutter 的logo并自动换行</span>
+</span><span class="code-line"><span class="token class-name">Wrap</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">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 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="stack"><a aria-hidden="true" tabindex="-1" href="#stack"><span class="icon icon-link"></span></a>Stack</h3><div class="wrap-body">
+<p>Stack 可以将一多个子组件叠在一起显示。堆叠顺序按照children属性中的列表依次堆叠摆放，默认将子控件沿左上角对齐。
+需要控制子控件位置可以嵌套<code>Positoned</code>控件。</p>
+<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// 依次堆叠300*300的蓝色色块、200*200的黑色色块、</span>
+</span><span class="code-line"><span class="token comment">// 100*100的黄色色块</span>
+</span><span class="code-line"><span class="token class-name">Stack</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">Container</span><span class="token punctuation">(</span>
+</span><span class="code-line">      height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
+</span><span class="code-line">      width<span class="token punctuation">:</span> <span class="token number">300</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 class-name">Container</span><span class="token punctuation">(</span>
+</span><span class="code-line">      height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
+</span><span class="code-line">      width<span class="token punctuation">:</span> <span class="token number">200</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>black<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">Container</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">      color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>yellow<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 row-span-2"><div class="wrap-header h3wrap"><h3 id="positioned"><a aria-hidden="true" tabindex="-1" href="#positioned"><span class="icon icon-link"></span></a>Positioned</h3><div class="wrap-body">
+<!--rehype:wrap-class=row-span-2-->
+<p>若需要控制Stack中子控件的位置，则可以嵌套改控件。</p>
+<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Stack</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 comment">// 默认摆放在左上位置</span>
+</span><span class="code-line">    <span class="token class-name">Container</span><span class="token punctuation">(</span>
+</span><span class="code-line">      height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
+</span><span class="code-line">      width<span class="token punctuation">:</span> <span class="token number">300</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 comment">// 距离左边40个、距离上面40个逻辑像素的位置</span>
+</span><span class="code-line">    <span class="token class-name">Positioned</span><span class="token punctuation">(</span>
+</span><span class="code-line">      left<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span>
+</span><span class="code-line">      top<span class="token punctuation">:</span> <span class="token number">40</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">        height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
+</span><span class="code-line">        width<span class="token punctuation">:</span> <span class="token number">200</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>black<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">// 距离左边80个、距离上面80个逻辑像素的位置</span>
+</span><span class="code-line">    <span class="token class-name">Positioned</span><span class="token punctuation">(</span>
+</span><span class="code-line">      left<span class="token punctuation">:</span> <span class="token number">80</span><span class="token punctuation">,</span>
+</span><span class="code-line">      top<span class="token punctuation">:</span> <span class="token number">80</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">        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">        color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>yellow<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="align"><a aria-hidden="true" tabindex="-1" href="#align"><span class="icon icon-link"></span></a>Align</h3><div class="wrap-body">
+<p>Align组件用于决定子组件对齐方式</p>
+<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// 使用Align将Button 居中在Container中</span>
+</span><span class="code-line"><span class="token class-name">Container</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">  height<span class="token punctuation">:</span> <span class="token number">100</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">  child<span class="token punctuation">:</span> <span class="token class-name">Align</span><span class="token punctuation">(</span>
+</span><span class="code-line">    alignment<span class="token punctuation">:</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
+</span><span class="code-line">    child<span class="token punctuation">:</span> <span class="token class-name">ElevatedButton</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">      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">'Center'</span></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 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="center"><a aria-hidden="true" tabindex="-1" href="#center"><span class="icon icon-link"></span></a>Center</h3><div class="wrap-body">
+<p>Center 组件实际上继承于Align。用于专门剧中。</p>
+<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">//与 Align中代码效果一致</span>
+</span><span class="code-line"><span class="token class-name">Container</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">  height<span class="token punctuation">:</span> <span class="token number">100</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">  child<span class="token punctuation">:</span> <span class="token class-name">Center</span><span class="token punctuation">(</span>
+</span><span class="code-line">    child<span class="token punctuation">:</span> <span class="token class-name">ElevatedButton</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">      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">'Center'</span></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 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>
--- a/index.html
+++ b/index.html
@ -594,12 +594,12 @@
 <a href="https://github.com/Alex-Programer" title="Alex">
  <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex">
 </a>
-<a href="https://github.com/expoli" title="expoli">
-  <img src="https://avatars.githubusercontent.com/u/31023767?v=4" width="42;" alt="expoli">
-</a>
 <a href="https://github.com/JeffersonHuang" title="Jefferson">
  <img src="https://avatars.githubusercontent.com/u/47512530?v=4" width="42;" alt="Jefferson">
 </a>
+<a href="https://github.com/expoli" title="expoli">
+  <img src="https://avatars.githubusercontent.com/u/31023767?v=4" width="42;" alt="expoli">
+</a>
 <a href="https://github.com/sjh42" title="42:p">
  <img src="https://avatars.githubusercontent.com/u/34529275?v=4" width="42;" alt="42:p">
 </a>
@ -750,7 +750,7 @@
 <!--rehype:class=home-card&style=margin:2.2rem 0;display: flex;justify-content: center;gap: 1rem;flex-wrap: wrap;-->
 <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/26 15:48:46</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/26 17:19:59</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>
 </svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><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>