mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 12:41:20 +08:00
* 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
This commit is contained in:
jaywcjlove
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user