From 0becb850cddfe6dc63d0fca6ce81f23661e8cd08 Mon Sep 17 00:00:00 2001 From: jaywcjlove Date: Sun, 27 Nov 2022 14:44:00 +0000 Subject: [PATCH] doc: update flutter.md #179 #58 d09737fcdace1458e01a860e8eb9037e68eedaf4 --- docs/flutter.html | 54 ++++++++++++++++++++++++----------------------- index.html | 2 +- 2 files changed, 29 insertions(+), 27 deletions(-) diff --git a/docs/flutter.html b/docs/flutter.html index 76d73c5c..df8516e7 100644 --- a/docs/flutter.html +++ b/docs/flutter.html @@ -390,17 +390,15 @@

基础布局

Container

在实际开发中，Container常常用于对一个组件进行包装修饰。

-
// 将Contianer大小固定为100 * 100， 背景色为蓝色。
-// 把Text包裹在Container中，并将其居中
-Container(
+
Container(
   width: 100,
   height: 100,
   color: Colors.blue,
   alignment: Alignment.center,
   child: Text('Hello world'),
 ),
-
 

+
将 Contianer 大小固定为 100 * 100， 背景色为蓝色。把 Text 包裹在 Container 中，并将其居中

Column

列布局(Column),可以将多个子组件沿着垂直的方向摆放(竖的摆放)

// 将container 和 button 摆放到同一列。
@@ -422,8 +420,7 @@

Row

行布局(Row)，可以将多个组件沿水平的方向摆放。

-
// 在同一行摆放3个Button
-Row(
+
Row(
   children: [
     ElevatedButton(
       onPressed: () {},
@@ -440,10 +437,10 @@
   ],
 ),
 

+
在同一行摆放 3 个 Button

Wrap

将子组件从左到右依次排列，当空间不足时自动换行。

-
// 显示多个Flutter 的logo并自动换行
-Wrap(
+
Wrap(
   children: [
     FlutterLogo(),
     FlutterLogo(),
@@ -454,12 +451,11 @@
   ],
 ),
 

+
显示多个 Flutter 的 logo 并自动换行

Stack

Stack 可以将一多个子组件叠在一起显示。堆叠顺序按照children属性中的列表依次堆叠摆放，默认将子控件沿左上角对齐。 需要控制子控件位置可以嵌套Positoned控件。

-
// 依次堆叠300*300的蓝色色块、200*200的黑色色块、
-// 100*100的黄色色块
-Stack(
+
Stack(
   children: [
     Container(
       height: 300,
@@ -479,6 +475,7 @@
   ],
 ),
 

+
依次堆叠 300*300 的蓝色色块、200*200 的黑色色块、100*100 的黄色色块

Positioned

若需要控制Stack中子控件的位置，则可以嵌套改控件。

@@ -545,11 +542,13 @@ ),

Flex

-

Flex 的用法与Row或Column类似，但只需要额外传入direction参数。 -Row 和 Column组件都继承Flex组件。 -设置direction 为Axis.horizontal 表示水平方向(Row)，为Axis.vertical则为垂直方向(Column)。

-
// 垂直方向依次摆放3个flutter logo
-Flex(
+
Flex 的用法与 Row 或 Column 类似，但只需要额外传入 direction 参数

+
    
+
  • Row 和 Column 组件都继承 Flex 组件
    • 
+
  • 设置 direction 为 Axis.horizontal 表示水平方向(Row)，为 Axis.vertical则为垂直方向(Column)
    • 
+

+
垂直方向依次摆放3个flutter logo

+
Flex(
   direction: Axis.vertiacl,
   children；[
     Fluterlogo(),
@@ -557,8 +556,9 @@ Row 和 Column组件都继承Flex组件。
     Fluterlogo(),
   ],
 ),
-// 水平方向依次摆放3个flutter logo
-Flex(
+

+
水平方向依次摆放 3 个 flutter logo

+
Flex(
   dirction: Axis.horizontal,
   children: [
     Flutterlogo(),
@@ -567,8 +567,9 @@ Row 和 Column组件都继承Flex组件。
   ],
 ),
 

-

Expaneded

-

Expanded 用于扩张一个子组件。可以通过flex属性，用于表示该组件相对其他弹性组件放大的倍数(可以理解为一个权重)。

+

Expaneded

+ +

Expanded 用于扩张一个子组件。可以通过 flex 属性，用于表示该组件相对其他弹性组件放大的倍数(可以理解为一个权重)。

// Container 会占满剩余的全部空用空间
 Row(
   children: [
@@ -603,13 +604,12 @@ Row 和 Column组件都继承Flex组件。
   ],
 ),
-

Flexible

-

Flexible 是Expanded组件的父类。 -与Expanded不同的是，Flexible可以通过fit属性设置子控件是否必须占满Flexibal扩展的空间。而Expaned默认子控件必须占满。

-

将Flexible的fit属性设置为tingt，就等价于使用Expanded。

+

Flexible

+ +

Flexible 是 Expanded 组件的父类。 +与 Expanded 不同的是，Flexible 可以通过 fit 属性设置子控件是否必须占满 Flexibal 扩展的空间。而 Expaned 默认子控件必须占满

// 如果将fit设置为tight，
 // 则绿色Container 和蓝色Container大小一样。
-
 // 如果将fit设置为loose，
 // 则两个Flexible扩展的空间大小是一样的，
 // 但绿色Container并不会填充整个扩展的空间。
@@ -633,8 +633,9 @@ Row 和 Column组件都继承Flex组件。
   ],
 ),
+

将 Flexible 的 fit 属性设置为 tingt，就等价于使用 Expanded

Spacer

-

Spacer 用于在布局中留白。例如，需要文本和图标位于一个行的两端,而中间留白时。就可以使用Spacer。

+

Spacer 用于在布局中留白

Row(
   children: [
     Text('Item'),
@@ -643,6 +644,7 @@ Row 和 Column组件都继承Flex组件。
   ],
 ),
+

例如，需要文本和图标位于一个行的两端，而中间留白时。就可以使用 Spacer

另见

  • Dart 备忘清单 (jaywcjlove.github.io)
    • diff --git a/index.html b/index.html index 7ea7302a..43dc39f6 100644 --- a/index.html +++ b/index.html @@ -758,7 +758,7 @@

    如果你有资源，可以很方便部署 web 版，这非常简单，只需要克隆 gh-pages 分支代码到你的静态服务就可以了，还可以使用 docker 快捷部署 web 版。

    -
+