buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-17 20:51:21 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
d37bb857e860cec4a37dbd0ae246c357f804c534
reference/docs/flutter.html
jaywcjlove d37bb857e8 doc: update flutter.md #58 #149 0148846d7e
2022-11-20 09:20:58 +00:00

398 lines
61 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>Flutter 备忘清单
&#x26; flutter cheatsheet &#x26; Quick Reference</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta description="包含 Flutter 常用的组件、布局、方法等。初学者的完整快速参考为开发人员分享快速参考备忘单。">
<meta keywords="Quick,Reference,cheatsheet,flutter">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/katex.css">
</head>
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><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><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/flutter.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
</svg>
</button><script src="../js/dark.js"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="flutter-备忘清单"><svg viewBox="0 0 256 317" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" height="1em" width="1em">
<defs>
<linearGradient x1="3.952%" y1="26.993%" x2="75.897%" y2="52.919%" id="a">
<stop offset="0%"></stop>
<stop stop-opacity="0" offset="100%"></stop>
</linearGradient>
</defs>
<path fill="#47C5FB" d="M157.666 0 0 157.667l48.8 48.8L255.268.001zm-1.099 145.397L72.15 229.815l48.984 49.716 48.71-48.71 85.425-85.424z"></path>
<path fill="#00569E" d="m121.133 279.531 37.082 37.082h97.052l-85.425-85.792z"></path>
<path fill="#00B5F8" d="m71.6 230.364 48.801-48.801 49.441 49.258-48.71 48.71z"></path>
<path fill-opacity="0.8" fill="url(#a)" d="m121.133 279.531 40.56-13.459 4.029-31.13z"></path>
</svg>
<a aria-hidden="true" tabindex="-1" href="#flutter-备忘清单"><span class="icon icon-link"></span></a>Flutter 备忘清单</h1><div class="wrap-body">
<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">
</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>
<!--rehype:className=wrap-text-->
<p>在 <a href="https://support.apple.com/zh-cn/HT211814">Apple 芯片的 Mac 电脑</a> 上，还需要安装 <a href="https://github.com/flutter/website/pull/7119#issuecomment-1124537969">Rosetta 2</a> 环境因为 一些辅助工具 仍然需要，通过手动运行上面的命令来安装</p>
<h4 id="获取-flutter-sdk"><a aria-hidden="true" tabindex="-1" href="#获取-flutter-sdk"><span class="icon icon-link"></span></a>获取 Flutter SDK</h4>
<ul class="style-timeline">
<li>
<p>安装包来获取最新的 stable Flutter SDK：</p>
<ul>
<li>
<p>Intel <a href="https://storage.flutter-io.cn/flutter_infra_release/releases/stable/macos/flutter_macos_3.3.8-stable.zip"><code>flutter_macos_3.3.8-stable.zip</code></a></p>
</li>
<li>
<p>Apple 芯片 <a href="https://storage.flutter-io.cn/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.3.8-stable.zip"><code>flutter_macos_arm64_3.3.8-stable.zip</code></a></p>
<p>想要获取到其他版本的安装包，请参阅 <a href="https://flutter.cn/docs/development/tools/sdk/releases">SDK 版本列表</a> 页面</p>
</li>
</ul>
</li>
<li>
<p>将文件解压到目标路径, 比如:</p>
<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token builtin class-name">cd</span> ~/development
</span><span class="code-line">$ <span class="token function">unzip</span> ~/Downloads/flutter_macos_3.3.8-stable.zip
</span></code></pre>
<!--rehype:className=wrap-text-->
</li>
<li>
<p>配置 <code>flutter</code> 的 PATH 环境变量：</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token builtin class-name">export</span> <span class="token assign-left variable"><span class="token environment constant">PATH</span></span><span class="token operator">=</span><span class="token string">"<span class="token environment constant">$PATH</span>:<span class="token variable"><span class="token variable">`</span><span class="token builtin class-name">pwd</span><span class="token variable">`</span></span>/flutter/bin"</span>
</span></code></pre>
</li>
<li>
<p>运行 <code>flutter doctor</code> 命令</p>
</li>
</ul>
<!--rehype:className=style-timeline-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="windows-操作系统上安装和配置"><a aria-hidden="true" tabindex="-1" href="#windows-操作系统上安装和配置"><span class="icon icon-link"></span></a>Windows 操作系统上安装和配置</h3><div class="wrap-body">
<ul class="style-timeline">
<li>点击下方的安装包，获取 stable 发行通道的 Flutter SDK 最新版本：
<ul>
<li><a href="https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_3.3.8-stable.zip">flutter_windows_3.3.8-stable.zip</a></li>
<li>要查看其他发行通道和以往的版本，请参阅 <a href="https://flutter.cn/docs/development/tools/sdk/releases">SDK 版本列表</a> 页面</li>
</ul>
</li>
<li>将压缩包解压，然后把其中的 <code>flutter</code> 目录整个放在你想放置 <code>Flutter SDK</code> 的路径中（例如 <code>C:\src\flutter</code>）</li>
<li>更新 <code>path</code> 环境变量，在开始菜单的搜索功能键入<code>「env」</code>，然后选择 <code>编辑系统环境变量</code>。在 <strong><code>用户变量</code></strong> 一栏中，检查是否有 <strong><code>Path</code></strong> 这个条目：
<ul>
<li>如果存在这个条目，以 <code>;</code> 分隔已有的内容，加入 <code>flutter\bin</code> 目录的完整路径。</li>
<li>如果不存在的话，在用户环境变量中创建一个新的 Path 变量，然后将 <code>flutter\bin</code> 所在的完整路径作为新变量的值</li>
</ul>
</li>
</ul>
<!--rehype:className=style-timeline-->
<p>如果你不想安装指定版本的安装包。可以忽略步骤 <code>1</code> 和 <code>2</code>。从 <code>GitHub</code> 上的 <code>Flutter repo</code> 获取源代码，并根据需要，切换到指定的分支或标签</p>
<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">C:<span class="token punctuation">\</span>src<span class="token operator">></span>git clone https://github.com/flutter/flutter.git <span class="token parameter variable">-b</span> stable
</span></code></pre>
<!--rehype:className=wrap-text-->
</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="text-样式文本"><a aria-hidden="true" tabindex="-1" href="#text-样式文本"><span class="icon icon-link"></span></a>Text 样式文本</h3><div class="wrap-body">
<pre class="language-dart"><code class="language-dart code-highlight"><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">"Hello world"</span></span><span class="token punctuation">,</span>
</span><span class="code-line"> textAlign<span class="token punctuation">:</span> <span class="token class-name">TextAlign</span><span class="token punctuation">.</span>left<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 class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Hello world! I'm Jack. "</span></span><span class="token operator">*</span><span class="token number">4</span><span class="token punctuation">,</span>
</span><span class="code-line"> maxLines<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
</span><span class="code-line"> overflow<span class="token punctuation">:</span> <span class="token class-name">TextOverflow</span><span class="token punctuation">.</span>ellipsis<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 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><span class="code-line"> textScaleFactor<span class="token punctuation">:</span> <span class="token number">1.5</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="textstyle-指定文本显示的样式"><a aria-hidden="true" tabindex="-1" href="#textstyle-指定文本显示的样式"><span class="icon icon-link"></span></a>TextStyle 指定文本显示的样式</h3><div class="wrap-body">
<pre class="wrap-text"><code class="language-dart code-highlight"><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">"Hello world"</span></span><span class="token punctuation">,</span>
</span><span class="code-line"> style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</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"> fontSize<span class="token punctuation">:</span> <span class="token number">18.0</span><span class="token punctuation">,</span>
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">1.2</span><span class="token punctuation">,</span>
</span><span class="code-line"> fontFamily<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"Courier"</span></span><span class="token punctuation">,</span>
</span><span class="code-line"> background<span class="token punctuation">:</span> <span class="token class-name">Paint</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token punctuation">.</span>color<span class="token operator">=</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>yellow<span class="token punctuation">,</span>
</span><span class="code-line"> decoration<span class="token punctuation">:</span><span class="token class-name">TextDecoration</span><span class="token punctuation">.</span>underline<span class="token punctuation">,</span>
</span><span class="code-line"> decorationStyle<span class="token punctuation">:</span> <span class="token class-name">TextDecorationStyle</span><span class="token punctuation">.</span>dashed
</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>
<!--rehype:className=wrap-text-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="textspan-文本的一个片段"><a aria-hidden="true" tabindex="-1" href="#textspan-文本的一个片段"><span class="icon icon-link"></span></a>TextSpan 文本的一个“片段”</h3><div class="wrap-body">
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Text</span><span class="token punctuation">.</span><span class="token function">rich</span><span class="token punctuation">(</span><span class="token class-name">TextSpan</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">TextSpan</span><span class="token punctuation">(</span>
</span><span class="code-line"> text<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"Home: "</span></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">TextSpan</span><span class="token punctuation">(</span>
</span><span class="code-line"> text<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"https://flutter.dev"</span></span><span class="token punctuation">,</span>
</span><span class="code-line"> style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</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><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> recognizer<span class="token punctuation">:</span> _tapRecognizer
</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><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-4"><div class="wrap-header h3wrap"><h3 id="defaulttextstyle-文本默认样式"><a aria-hidden="true" tabindex="-1" href="#defaulttextstyle-文本默认样式"><span class="icon icon-link"></span></a>DefaultTextStyle 文本默认样式</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-4-->
<pre class="wrap-text"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">DefaultTextStyle</span><span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token comment">// 1.设置文本默认样式 </span>
</span><span class="code-line"> style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</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"> fontSize<span class="token punctuation">:</span> <span class="token number">20.0</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"> textAlign<span class="token punctuation">:</span> <span class="token class-name">TextAlign</span><span class="token punctuation">.</span>start<span class="token punctuation">,</span>
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Column</span><span class="token punctuation">(</span>
</span><span class="code-line"> crossAxisAlignment<span class="token punctuation">:</span> <span class="token class-name">CrossAxisAlignment</span><span class="token punctuation">.</span>start<span class="token punctuation">,</span>
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token generics"><span class="token punctuation">&#x3C;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></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">"hello world"</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">"I am Jack"</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">"I am Jack"</span></span><span class="token punctuation">,</span>
</span><span class="code-line"> style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
</span><span class="code-line"> inherit<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//2.不继承默认样式</span>
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey
</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><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<!--rehype:className=wrap-text-->
</div></div></div><div class="wrap h3body-not-exist row-span-4"><div class="wrap-header h3wrap"><h3 id="字体"><a aria-hidden="true" tabindex="-1" href="#字体"><span class="icon icon-link"></span></a>字体</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-4-->
<ul class="style-timeline">
<li>
<p>在 asset 中声明，要先在 <code>pubspec.yaml</code> 中声明它</p>
<pre class="language-yaml"><code class="language-yaml code-highlight"><span class="code-line"><span class="token key atrule">flutter</span><span class="token punctuation">:</span>
</span><span class="code-line"> <span class="token key atrule">fonts</span><span class="token punctuation">:</span>
</span><span class="code-line"> <span class="token punctuation">-</span> <span class="token key atrule">family</span><span class="token punctuation">:</span> Raleway
</span><span class="code-line"> <span class="token key atrule">fonts</span><span class="token punctuation">:</span>
</span><span class="code-line"> <span class="token punctuation">-</span> <span class="token key atrule">asset</span><span class="token punctuation">:</span> assets/fonts/Raleway<span class="token punctuation">-</span>Regular.ttf
</span><span class="code-line"> <span class="token punctuation">-</span> <span class="token key atrule">asset</span><span class="token punctuation">:</span> assets/fonts/Raleway<span class="token punctuation">-</span>Medium.ttf
</span><span class="code-line"> <span class="token key atrule">weight</span><span class="token punctuation">:</span> <span class="token number">500</span>
</span><span class="code-line"> <span class="token punctuation">-</span> <span class="token key atrule">asset</span><span class="token punctuation">:</span> assets/fonts/Raleway<span class="token punctuation">-</span>SemiBold.ttf
</span><span class="code-line"> <span class="token key atrule">weight</span><span class="token punctuation">:</span> <span class="token number">600</span>
</span><span class="code-line"> <span class="token punctuation">-</span> <span class="token key atrule">family</span><span class="token punctuation">:</span> AbrilFatface
</span><span class="code-line"> <span class="token key atrule">fonts</span><span class="token punctuation">:</span>
</span><span class="code-line"> <span class="token punctuation">-</span> <span class="token key atrule">asset</span><span class="token punctuation">:</span> assets/fonts/abrilfatface/AbrilFatface<span class="token punctuation">-</span>Regular.ttf
</span></code></pre>
</li>
<li>
<p>将字体文件复制到在 <code>pubspec.yaml</code> 中指定的位置</p>
</li>
<li>
<p>使用字体</p>
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// 声明文本样式</span>
</span><span class="code-line"><span class="token keyword">const</span> textStyle <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
</span><span class="code-line"> fontFamily<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">'Raleway'</span></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">// 使用文本样式</span>
</span><span class="code-line"><span class="token keyword">var</span> buttonText <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token string-literal"><span class="token string">"Use the font for this text"</span></span><span class="token punctuation">,</span>
</span><span class="code-line"> style<span class="token punctuation">:</span> textStyle<span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</li>
</ul>
<!--rehype:className=style-timeline-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="elevatedbutton-漂浮按钮"><a aria-hidden="true" tabindex="-1" href="#elevatedbutton-漂浮按钮"><span class="icon icon-link"></span></a>ElevatedButton "漂浮"按钮</h3><div class="wrap-body">
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">ElevatedButton</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">"normal"</span></span><span class="token punctuation">)</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"><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="textbutton-文本按钮"><a aria-hidden="true" tabindex="-1" href="#textbutton-文本按钮"><span class="icon icon-link"></span></a>TextButton 文本按钮</h3><div class="wrap-body">
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">TextButton</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">"normal"</span></span><span class="token punctuation">)</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"><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="outlinebutton-边框阴影且背景透明按钮"><a aria-hidden="true" tabindex="-1" href="#outlinebutton-边框阴影且背景透明按钮"><span class="icon icon-link"></span></a>OutlineButton 边框阴影且背景透明按钮</h3><div class="wrap-body">
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">OutlineButton</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">"normal"</span></span><span class="token punctuation">)</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"><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="iconbutton-可点击的图标按钮"><a aria-hidden="true" tabindex="-1" href="#iconbutton-可点击的图标按钮"><span class="icon icon-link"></span></a>IconButton 可点击的图标按钮</h3><div class="wrap-body">
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">IconButton</span><span class="token punctuation">(</span>
</span><span class="code-line"> icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>thumb_up<span class="token punctuation">)</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"><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="带图标的按钮"><a aria-hidden="true" tabindex="-1" href="#带图标的按钮"><span class="icon icon-link"></span></a>带图标的按钮</h3><div class="wrap-body">
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">ElevatedButton</span><span class="token punctuation">.</span><span class="token function">icon</span><span class="token punctuation">(</span>
</span><span class="code-line"> icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>send<span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> label<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">"发送"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> _onPressed<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">OutlineButton</span><span class="token punctuation">.</span><span class="token function">icon</span><span class="token punctuation">(</span>
</span><span class="code-line"> icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>add<span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> label<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">"添加"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> _onPressed<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">TextButton</span><span class="token punctuation">.</span><span class="token function">icon</span><span class="token punctuation">(</span>
</span><span class="code-line"> icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>info<span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> label<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">"详情"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> _onPressed<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="从-asset-中加载图片"><a aria-hidden="true" tabindex="-1" href="#从-asset-中加载图片"><span class="icon icon-link"></span></a>从 asset 中加载图片</h3><div class="wrap-body">
<ul class="style-timeline">
<li>
<p>在工程根目录下创建一个<code>images目录</code>，并将图片 <code>aaa.png</code> 拷贝到该目录。</p>
</li>
<li>
<p>在 <code>pubspec.yaml</code> 中的 <code>flutter</code> 部分添加如下内容：</p>
<pre class="language-yaml"><code class="language-yaml code-highlight"><span class="code-line"><span class="token key atrule">assets</span><span class="token punctuation">:</span>
</span><span class="code-line"> <span class="token punctuation">-</span> images/aaa.png
</span></code></pre>
<p>注意: 由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处 assets 前面应有两个空格。</p>
</li>
<li>
<p>加载该图片</p>
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Image</span><span class="token punctuation">(</span>
</span><span class="code-line"> image<span class="token punctuation">:</span> <span class="token class-name">AssetImage</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"images/aaa.png"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">100.0</span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<p>Image 也提供了一个快捷的构造函数 <code>Image.asset</code> 用于从 <code>asset</code> 中加载、显示图片：</p>
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">asset</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"images/aaa.png"</span></span><span class="token punctuation">,</span>
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">100.0</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">)</span>
</span></code></pre>
</li>
</ul>
<!--rehype:className=style-timeline-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="从网络加载图片"><a aria-hidden="true" tabindex="-1" href="#从网络加载图片"><span class="icon icon-link"></span></a>从网络加载图片</h3><div class="wrap-body">
<pre class="wrap-text"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Image</span><span class="token punctuation">(</span>
</span><span class="code-line"> image<span class="token punctuation">:</span> <span class="token class-name">NetworkImage</span><span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token string-literal"><span class="token string">"https://avatars2.githubusercontent.com/u/20411648?s=460&#x26;v=4"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">100.0</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">)</span>
</span></code></pre>
<!--rehype:className=wrap-text-->
<p>Image 也提供了一个快捷的构造函数 <code>Image.network</code> 用于从网络加载、显示图片：</p>
<pre class="wrap-text"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token string-literal"><span class="token string">"https://avatars2.githubusercontent.com/u/20411648?s=460&#x26;v=4"</span></span><span class="token punctuation">,</span>
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">100.0</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">)</span>
</span></code></pre>
<!--rehype:className=wrap-text-->
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="image-参数"><a aria-hidden="true" tabindex="-1" href="#image-参数"><span class="icon icon-link"></span></a>Image 参数</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token class-name">Image</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 keyword">this</span><span class="token punctuation">.</span>width<span class="token punctuation">,</span> <span class="token comment">// 图片的宽</span>
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">,</span> <span class="token comment">// 图片高度</span>
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span> <span class="token comment">// 图片的混合色值</span>
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>colorBlendMode<span class="token punctuation">,</span> <span class="token comment">// 混合模式</span>
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>fit<span class="token punctuation">,</span><span class="token comment">// 缩放模式</span>
</span><span class="code-line"> <span class="token comment">// 对齐方式</span>
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>alignment <span class="token operator">=</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token comment">// 重复方式</span>
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>repeat <span class="token operator">=</span> <span class="token class-name">ImageRepeat</span><span class="token punctuation">.</span>noRepeat<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>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="switch-单选开关"><a aria-hidden="true" tabindex="-1" href="#switch-单选开关"><span class="icon icon-link"></span></a>Switch 单选开关</h3><div class="wrap-body">
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Switch</span><span class="token punctuation">(</span>
</span><span class="code-line"> value<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token comment">//当前状态</span>
</span><span class="code-line"> onChanged<span class="token punctuation">:</span><span class="token punctuation">(</span>value<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 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="checkbox-复选框"><a aria-hidden="true" tabindex="-1" href="#checkbox-复选框"><span class="icon icon-link"></span></a>Checkbox 复选框</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Checkbox</span><span class="token punctuation">(</span>
</span><span class="code-line"> value<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token comment">// 选中时的颜色</span>
</span><span class="code-line"> activeColor<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"> onChanged<span class="token punctuation">:</span><span class="token punctuation">(</span>value<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 punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="textfield-文本输入框"><a aria-hidden="true" tabindex="-1" href="#textfield-文本输入框"><span class="icon icon-link"></span></a>TextField 文本输入框</h3><div class="wrap-body">
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">TextField</span><span class="token punctuation">(</span>
</span><span class="code-line"> autofocus<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> onChanged<span class="token punctuation">:</span> <span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">print</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"onChange: </span><span class="token interpolation"><span class="token punctuation">$</span><span class="token expression">v</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><span class="code-line"><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="linearprogressindicator-线性条状的进度条"><a aria-hidden="true" tabindex="-1" href="#linearprogressindicator-线性条状的进度条"><span class="icon icon-link"></span></a>LinearProgressIndicator 线性、条状的进度条</h3><div class="wrap-body">
<p>模糊进度条(会执行一个动画)</p>
<pre class="wrap-text"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">LinearProgressIndicator</span><span class="token punctuation">(</span>
</span><span class="code-line"> backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey<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"> valueColor<span class="token punctuation">:</span> <span class="token class-name">AlwaysStoppedAnimation</span><span class="token punctuation">(</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<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>
<!--rehype:className=wrap-text-->
<p>进度条显示 <code>50%</code></p>
<pre class="wrap-text"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">LinearProgressIndicator</span><span class="token punctuation">(</span>
</span><span class="code-line"> backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey<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"> valueColor<span class="token punctuation">:</span> <span class="token class-name">AlwaysStoppedAnimation</span><span class="token punctuation">(</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> value<span class="token punctuation">:</span> <span class="token number">.5</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">)</span>
</span></code></pre>
<!--rehype:className=wrap-text-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="circularprogressindicator-圆形进度条"><a aria-hidden="true" tabindex="-1" href="#circularprogressindicator-圆形进度条"><span class="icon icon-link"></span></a>CircularProgressIndicator 圆形进度条</h3><div class="wrap-body">
<p>模糊进度条(会执行一个旋转动画)</p>
<pre class="wrap-text"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">CircularProgressIndicator</span><span class="token punctuation">(</span>
</span><span class="code-line"> backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey<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"> valueColor<span class="token punctuation">:</span> <span class="token class-name">AlwaysStoppedAnimation</span><span class="token punctuation">(</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<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>
<!--rehype:className=wrap-text-->
<p>进度条显示 <code>50%</code>，会显示一个半圆</p>
<pre class="wrap-text"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">CircularProgressIndicator</span><span class="token punctuation">(</span>
</span><span class="code-line"> backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey<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"> valueColor<span class="token punctuation">:</span> <span class="token class-name">AlwaysStoppedAnimation</span><span class="token punctuation">(</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> value<span class="token punctuation">:</span> <span class="token number">.5</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span></code></pre>
<!--rehype:className=wrap-text-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="自定义尺寸"><a aria-hidden="true" tabindex="-1" href="#自定义尺寸"><span class="icon icon-link"></span></a>自定义尺寸</h3><div class="wrap-body">
<p>线性进度条高度指定为 <code>3</code></p>
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">SizedBox</span><span class="token punctuation">(</span>
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">LinearProgressIndicator</span><span class="token punctuation">(</span>
</span><span class="code-line"> backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey<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"> valueColor<span class="token punctuation">:</span> <span class="token class-name">AlwaysStoppedAnimation</span><span class="token punctuation">(</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> value<span class="token punctuation">:</span> <span class="token number">.5</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>100</code></p>
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">SizedBox</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"> child<span class="token punctuation">:</span> <span class="token class-name">CircularProgressIndicator</span><span class="token punctuation">(</span>
</span><span class="code-line"> backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey<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"> valueColor<span class="token punctuation">:</span> <span class="token class-name">AlwaysStoppedAnimation</span><span class="token punctuation">(</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> value<span class="token punctuation">:</span> <span class="token number">.7</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>
<li><a href="https://flutter.dev">flutter 官网</a> <em>(flutter.dev)</em></li>
<li><a href="https://flutterchina.club/">flutter 中文开发者社区</a> <em>(flutterchina.club)</em></li>
</ul>
</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang.</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"><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>
Reference in New Issue View Git Blame Copy Permalink