mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 12:41:20 +08:00
790 lines
126 KiB
HTML
790 lines
126 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Flutter 备忘清单
|
||
& flutter cheatsheet & Quick Reference</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta description="包含 Flutter 常用的组件、布局、方法等。初学者的完整快速参考
|
||
|
||
入门，为开发人员分享快速参考备忘单。">
|
||
<meta keywords="flutter,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||
<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?v=1.3.6"></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><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>
|
||
<!--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"><</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&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&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-exist"><div class="wrap-header h2wrap"><h2 id="基础布局"><a aria-hidden="true" tabindex="-1" href="#基础布局"><span class="icon icon-link"></span></a>基础布局</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="container"><a aria-hidden="true" tabindex="-1" href="#container"><span class="icon icon-link"></span></a>Container</h3><div class="wrap-body">
|
||
<p>在实际开发中，Container常常用于对一个组件进行包装修饰。</p>
|
||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> alignment<span class="token punctuation">:</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'Hello world'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></code></pre>
|
||
<p>将 <code>Contianer</code> 大小固定为 <code>100 * 100</code>， 背景色为蓝色。把 <code>Text</code> 包裹在 <code>Container</code> 中，并将其居中</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="column"><a aria-hidden="true" tabindex="-1" href="#column"><span class="icon icon-link"></span></a>Column</h3><div class="wrap-body">
|
||
<p>列布局(Column),可以将多个子组件沿着垂直的方向摆放(竖的摆放)</p>
|
||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// 将container 和 button 摆放到同一列。</span>
|
||
</span><span class="code-line"><span class="token class-name">Column</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> alignment<span class="token punctuation">:</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'Hello world'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">ElevatedButton</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'Button'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="row"><a aria-hidden="true" tabindex="-1" href="#row"><span class="icon icon-link"></span></a>Row</h3><div class="wrap-body">
|
||
<p>行布局(Row)，可以将多个组件沿水平的方向摆放。</p>
|
||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Row</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token class-name">ElevatedButton</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'1'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">ElevatedButton</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'2'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">ElevatedButton</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'3'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></code></pre>
|
||
<p>在同一行摆放 3 个 <code>Button</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="wrap"><a aria-hidden="true" tabindex="-1" href="#wrap"><span class="icon icon-link"></span></a>Wrap</h3><div class="wrap-body">
|
||
<p>将子组件从左到右依次排列，当空间不足时自动换行。</p>
|
||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Wrap</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></code></pre>
|
||
<p>显示多个 <code>Flutter</code> 的 <code>logo</code> 并自动换行</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="stack"><a aria-hidden="true" tabindex="-1" href="#stack"><span class="icon icon-link"></span></a>Stack</h3><div class="wrap-body">
|
||
<p>Stack 可以将一多个子组件叠在一起显示。堆叠顺序按照children属性中的列表依次堆叠摆放，默认将子控件沿左上角对齐。
|
||
需要控制子控件位置可以嵌套<code>Positoned</code>控件。</p>
|
||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Stack</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>black<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>yellow<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></code></pre>
|
||
<p>依次堆叠 <code>300*300</code> 的蓝色色块、<code>200*200</code> 的黑色色块、<code>100*100</code> 的黄色色块</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="positioned"><a aria-hidden="true" tabindex="-1" href="#positioned"><span class="icon icon-link"></span></a>Positioned</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>若需要控制Stack中子控件的位置，则可以嵌套改控件。</p>
|
||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Stack</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token comment">// 默认摆放在左上位置</span>
|
||
</span><span class="code-line"> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 距离左边40个、距离上面40个逻辑像素的位置</span>
|
||
</span><span class="code-line"> <span class="token class-name">Positioned</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> left<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> top<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>black<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 距离左边80个、距离上面80个逻辑像素的位置</span>
|
||
</span><span class="code-line"> <span class="token class-name">Positioned</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> left<span class="token punctuation">:</span> <span class="token number">80</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> top<span class="token punctuation">:</span> <span class="token number">80</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>yellow<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="align"><a aria-hidden="true" tabindex="-1" href="#align"><span class="icon icon-link"></span></a>Align</h3><div class="wrap-body">
|
||
<p>Align组件用于决定子组件对齐方式</p>
|
||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// 使用Align将Button 居中在Container中</span>
|
||
</span><span class="code-line"><span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Align</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> alignment<span class="token punctuation">:</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">ElevatedButton</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'Center'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="center"><a aria-hidden="true" tabindex="-1" href="#center"><span class="icon icon-link"></span></a>Center</h3><div class="wrap-body">
|
||
<p>Center 组件实际上继承于Align。用于专门剧中。</p>
|
||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">//与 Align中代码效果一致</span>
|
||
</span><span class="code-line"><span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Center</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">ElevatedButton</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'Center'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="flex"><a aria-hidden="true" tabindex="-1" href="#flex"><span class="icon icon-link"></span></a>Flex</h3><div class="wrap-body">
|
||
<p>Flex 的用法与 <code>Row</code> 或 <code>Column</code> 类似，但只需要额外传入 <code>direction</code> 参数</p>
|
||
<ul>
|
||
<li><code>Row</code> 和 <code>Column</code> 组件都继承 <code>Flex</code> 组件</li>
|
||
<li>设置 <code>direction</code> 为 <code>Axis.horizontal</code> 表示水平方向(<code>Row</code>)，为 <code>Axis.vertical</code>则为垂直方向(<code>Column</code>)</li>
|
||
</ul>
|
||
<p>垂直方向依次摆放3个flutter logo</p>
|
||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Flex</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> direction<span class="token punctuation">:</span> <span class="token class-name">Axis</span><span class="token punctuation">.</span>vertiacl<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></code></pre>
|
||
<p>水平方向依次摆放 3 个 flutter logo</p>
|
||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Flex</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> direction<span class="token punctuation">:</span> <span class="token class-name">Axis</span><span class="token punctuation">.</span>horizontal<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="expaneded"><a aria-hidden="true" tabindex="-1" href="#expaneded"><span class="icon icon-link"></span></a>Expaneded</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>Expanded 用于扩张一个子组件。可以通过 <code>flex</code> 属性，用于表示该组件相对其他弹性组件放大的倍数(可以理解为一个权重)。</p>
|
||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// Container 会占满剩余的全部空用空间</span>
|
||
</span><span class="code-line"><span class="token class-name">Row</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">Expanded</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 按照1:2 的比例分配一整行的空间</span>
|
||
</span><span class="code-line"><span class="token class-name">Row</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token class-name">Expanded</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">Expanded</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> flex<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="flexible"><a aria-hidden="true" tabindex="-1" href="#flexible"><span class="icon icon-link"></span></a>Flexible</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p><code>Flexible</code> 是 <code>Expanded</code> 组件的父类。
|
||
与 <code>Expanded</code> 不同的是，<code>Flexible</code> 可以通过 <code>fit</code> 属性设置子控件是否必须占满 <code>Flexibal</code> 扩展的空间。而 <code>Expaned</code> 默认子控件必须占满</p>
|
||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// 如果将fit设置为tight，</span>
|
||
</span><span class="code-line"><span class="token comment">// 则绿色Container 和蓝色Container大小一样。</span>
|
||
</span><span class="code-line"><span class="token comment">// 如果将fit设置为loose，</span>
|
||
</span><span class="code-line"><span class="token comment">// 则两个Flexible扩展的空间大小是一样的，</span>
|
||
</span><span class="code-line"><span class="token comment">// 但绿色Container并不会填充整个扩展的空间。</span>
|
||
</span><span class="code-line"><span class="token class-name">Row</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token class-name">Flexible</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> flex<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// fit: FlexFit.tight,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">Expanded</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> flex<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> child<span class="token punctuation">:</span> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token 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>Flexible</code> 的 <code>fit</code> 属性设置为 <code>tingt</code>，就等价于使用 <code>Expanded</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="spacer"><a aria-hidden="true" tabindex="-1" href="#spacer"><span class="icon icon-link"></span></a>Spacer</h3><div class="wrap-body">
|
||
<p>Spacer 用于在布局中留白</p>
|
||
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token class-name">Row</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'Item'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">Spacer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span></code></pre>
|
||
<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>
|
||
<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?v=1.3.6" defer></script><script src="../js/fuse.min.js?v=1.3.6" defer></script><script src="../js/main.js?v=1.3.6" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||
</html>
|