mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-18 05:01:21 +08:00
doc: update flutter.md (#220) f123f31449
This commit is contained in:
jaywcjlove
@ -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="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">
|
||||
</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="leve3 tocs-link" data-num="3" href="#listview">ListView</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#gridview">GridView</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#pageview">PageView</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>
|
||||
@ -645,6 +645,138 @@
|
||||
</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 class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="listview"><a aria-hidden="true" tabindex="-1" href="#listview"><span class="icon icon-link"></span></a>ListView</h3><div class="wrap-body">
|
||||
<p><code>ListView</code> 是一个支持滚动的列表组件。该组件默认支持上下滑动。
|
||||
<code>ListView</code>的默认构造函数，会立即初始化<code>children</code>中的所有子<code>widget</code>，无法动态加载。</p>
|
||||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">ListView</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">'1'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'2'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'3'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'4'</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></code></pre>
|
||||
<p>需要动态加载，则可以使用 <code>ListView.builder()</code>命名构函数。</p>
|
||||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// 动态生成4个Text</span>
|
||||
</span><span class="code-line"><span class="token class-name">ListView</span><span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> itemBuilder<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">,</span> int index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'</span><span class="token interpolation"><span class="token punctuation">$</span><span class="token expression">index</span></span><span class="token string">'</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> itemCount<span class="token punctuation">:</span> <span class="token number">4</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>ListView</code>中的<code>Item</code>添加分割线，则可以借助<code>ListView.separated()</code>。</p>
|
||||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// separatorBuilder 函数用于在元素之间插入分割线。</span>
|
||||
</span><span class="code-line"><span class="token comment">// 也可以返回其他widget。该widget会被插入各个元素之间。</span>
|
||||
</span><span class="code-line"><span class="token class-name">ListView</span><span class="token punctuation">.</span><span class="token function">separated</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> itemBuilder<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">,</span> int index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'</span><span class="token interpolation"><span class="token punctuation">$</span><span class="token expression">index</span></span><span class="token string">'</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> itemCount<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> separatorBuilder<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">,</span> int index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token comment">// 使用Divider widget 画一条粗为5，颜色为红色的线</span>
|
||||
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token keyword">const</span> <span class="token class-name">Divider</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> thickness<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <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 col-span-2"><div class="wrap-header h3wrap"><h3 id="gridview"><a aria-hidden="true" tabindex="-1" href="#gridview"><span class="icon icon-link"></span></a>GridView</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
<p><code>GridView</code>可将元素显示为二维网格状的列表组件，并支持主轴方向滚动。
|
||||
使用GridView() 构造函数，需要传入gridDelegate和children。Flutter中已经提供了两种实现方式，分别是:</p>
|
||||
<ul>
|
||||
<li><code>SliverGridDelegateWithFixedCrossAxisCount()</code> 用于交叉轴方向固定数。</li>
|
||||
<li><code>SliverGridDelegateWithMaxCrossAxisExtent()</code> 用于交叉轴方向限制最大长度。</li>
|
||||
</ul>
|
||||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// 使用SliverGridDelegateWithFixedCrossAxisCount</span>
|
||||
</span><span class="code-line"><span class="token class-name">GridView</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> gridDelegate<span class="token punctuation">:</span>
|
||||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token class-name">SliverGridDelegateWithFixedCrossAxisCount</span><span class="token punctuation">(</span>crossAxisCount<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token class-name">List</span><span class="token punctuation">.</span><span class="token function">generate</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> <span class="token number">8</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">(</span>index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">[</span>index <span class="token operator">%</span> <span class="token number">8</span> <span class="token operator">*</span> <span class="token number">100</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">"index </span><span class="token interpolation"><span class="token punctuation">$</span><span class="token expression">index</span></span><span class="token string">"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">)</span><span 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">// 使用SliverGridDelegateWithMaxCrossAxisExtent</span>
|
||||
</span><span class="code-line"> <span class="token class-name">GridView</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> gridDelegate<span class="token punctuation">:</span>
|
||||
</span><span class="code-line"> <span class="token class-name">SliverGridDelegateWithMaxCrossAxisExtent</span><span class="token punctuation">(</span>maxCrossAxisExtent<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token class-name">List</span><span class="token punctuation">.</span><span class="token function">generate</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> <span class="token number">8</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">(</span>index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">[</span>index <span class="token operator">%</span> <span class="token number">8</span> <span class="token operator">*</span> <span class="token number">100</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">"index </span><span class="token interpolation"><span class="token punctuation">$</span><span class="token expression">index</span></span><span class="token string">"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span></code></pre>
|
||||
<p><code>GridView.builder()</code>命名构造可以实现元素的动态加载，与<code>ListView.builder()</code>类似</p>
|
||||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">GridView</span><span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> itemCount<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> gridDelegate<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">SliverGridDelegateWithFixedCrossAxisCount</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> crossAxisCount<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> itemBuilder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">[</span>index <span class="token operator">%</span> <span class="token number">8</span> <span class="token operator">*</span> <span class="token number">100</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">"index </span><span class="token interpolation"><span class="token punctuation">$</span><span class="token expression">index</span></span><span class="token string">"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span></code></pre>
|
||||
<p><code>Gridview.count()</code> 一个简单的构造函数，只需要传入<code>crossAxisCount</code>（交叉轴元素的个数）和<code>children</code>即可。</p>
|
||||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">GridView</span><span class="token punctuation">.</span><span class="token function">count</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> crossAxisCount<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token comment">// 每行固定为4个</span>
|
||||
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token class-name">List</span><span class="token punctuation">.</span><span class="token function">generate</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> <span class="token number">8</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">(</span>index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">[</span>index <span class="token operator">%</span> <span class="token number">8</span> <span class="token operator">*</span> <span class="token number">100</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">"index </span><span class="token interpolation"><span class="token punctuation">$</span><span class="token expression">index</span></span><span class="token string">"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">)</span><span 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>GridView.extent()</code> 用于设定每个元素在交叉轴方向的最大尺寸。当程序运行在较大屏幕时通常能看到更多的元素，而不是少量元素的放大版。通过传入<code>maxCrossAxisExtent</code>,<code>Gridview</code>会根据屏幕尺寸自动选择合适的行数量。</p>
|
||||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">GridView</span><span class="token punctuation">.</span><span class="token function">extent</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> maxCrossAxisExtent<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token class-name">List</span><span class="token punctuation">.</span><span class="token function">generate</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> <span class="token number">8</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">(</span>index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">[</span>index <span class="token operator">%</span> <span class="token number">8</span> <span class="token operator">*</span> <span class="token number">100</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">"index </span><span class="token interpolation"><span class="token punctuation">$</span><span class="token expression">index</span></span><span class="token string">"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">)</span><span 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>GridView.count()</code>和GridView.extent()`可以看作GridView的语法糖。</p>
|
||||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="pageview"><a aria-hidden="true" tabindex="-1" href="#pageview"><span class="icon icon-link"></span></a>PageView</h3><div class="wrap-body">
|
||||
<p>使用<code>PageView</code>可以实现整屏页面滚动,默认为水平方向翻页。与<code>ListView</code>类似。</p>
|
||||
<ul>
|
||||
<li><code>pageSnapping</code>参数可以设置滑动时<code>Page</code>停留在任意位置。</li>
|
||||
<li><code>scrollDirection</code>参数设置滚动方向(默认为水平方向)。</li>
|
||||
</ul>
|
||||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">PageView</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> pageSnapping<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 取消页面固定</span>
|
||||
</span><span class="code-line"> scrollDirection<span class="token punctuation">:</span> <span class="token class-name">Axis</span><span class="token punctuation">.</span>vertical<span class="token punctuation">,</span> <span class="token comment">// 设置为垂直方向滚动</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 keyword">for</span> <span class="token punctuation">(</span>int i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">4</span><span class="token punctuation">;</span> i<span class="token operator">++</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"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">[</span>i <span class="token operator">%</span> <span class="token number">4</span> <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span></code></pre>
|
||||
<p>使用<code>PageView.builder()</code>命名构造，可以动态加载页面。与<code>ListView.builder()</code>类似。</p>
|
||||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">PageView</span><span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> pageSnapping<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> scrollDirection<span class="token punctuation">:</span> <span class="token class-name">Axis</span><span class="token punctuation">.</span>vertical<span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> itemBuilder<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">,</span> int index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">[</span>index <span class="token operator">%</span> <span class="token number">4</span> <span class="token operator">*</span> <span class="token number">100</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>
|
||||
|
||||
Reference in New Issue
Block a user