mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 20:51:21 +08:00
doc: update flutter.md #179 #58 d09737fcda
This commit is contained in:
jaywcjlove
@ -390,17 +390,15 @@
|
||||
</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>
|
||||
<pre class="language-dart"><code class="language-dart code-highlight"><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>
|
||||
<p>将 <code>Contianer</code> 大小固定为 <code>100 * 100</code>， 背景色为蓝色。把 <code>Text</code> 包裹在 <code>Container</code> 中，并将其居中</p>
|
||||
</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>
|
||||
@ -422,8 +420,7 @@
|
||||
</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>
|
||||
<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">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>
|
||||
@ -440,10 +437,10 @@
|
||||
</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>在同一行摆放 3 个 <code>Button</code></p>
|
||||
</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>
|
||||
<pre class="language-dart"><code class="language-dart code-highlight"><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>
|
||||
@ -454,12 +451,11 @@
|
||||
</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>Flutter</code> 的 <code>logo</code> 并自动换行</p>
|
||||
</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>
|
||||
<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 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>
|
||||
@ -479,6 +475,7 @@
|
||||
</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>300*300</code> 的蓝色色块、<code>200*200</code> 的黑色色块、<code>100*100</code> 的黄色色块</p>
|
||||
</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>
|
||||
@ -545,11 +542,13 @@
|
||||
</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>
|
||||
<p>Flex 的用法与 <code>Row</code> 或 <code>Column</code> 类似，但只需要额外传入 <code>direction</code> 参数</p>
|
||||
<ul>
|
||||
<li><code>Row</code> 和 <code>Column</code> 组件都继承 <code>Flex</code> 组件</li>
|
||||
<li>设置 <code>direction</code> 为 <code>Axis.horizontal</code> 表示水平方向(<code>Row</code>)，为 <code>Axis.vertical</code>则为垂直方向(<code>Column</code>)</li>
|
||||
</ul>
|
||||
<p>垂直方向依次摆放3个flutter logo</p>
|
||||
<pre class="language-dart"><code class="language-dart code-highlight"><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>
|
||||
@ -557,8 +556,9 @@ Row 和 Column组件都继承Flex组件。
|
||||
</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></code></pre>
|
||||
<p>水平方向依次摆放 3 个 flutter logo</p>
|
||||
<pre class="language-dart"><code class="language-dart code-highlight"><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>
|
||||
@ -567,8 +567,9 @@ Row 和 Column组件都继承Flex组件。
|
||||
</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>
|
||||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><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">
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
<p>Expanded 用于扩张一个子组件。可以通过 <code>flex</code> 属性，用于表示该组件相对其他弹性组件放大的倍数(可以理解为一个权重)。</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>
|
||||
@ -603,13 +604,12 @@ Row 和 Column组件都继承Flex组件。
|
||||
</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>
|
||||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><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">
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
<p><code>Flexible</code> 是 <code>Expanded</code> 组件的父类。
|
||||
与 <code>Expanded</code> 不同的是，<code>Flexible</code> 可以通过 <code>fit</code> 属性设置子控件是否必须占满 <code>Flexibal</code> 扩展的空间。而 <code>Expaned</code> 默认子控件必须占满</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>
|
||||
@ -633,8 +633,9 @@ Row 和 Column组件都继承Flex组件。
|
||||
</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>Flexible</code> 的 <code>fit</code> 属性设置为 <code>tingt</code>，就等价于使用 <code>Expanded</code></p>
|
||||
</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>
|
||||
<p>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>
|
||||
@ -643,6 +644,7 @@ Row 和 Column组件都继承Flex组件。
|
||||
</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>Spacer</code></p>
|
||||
</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