Flutter 控件查阅清单

为了方便记录和使用Flutter中的各种控件及相关类，特写此博客以记之，好记性不如烂笔头嘛：）

通过控件的首字母进行查找，本文会持续更新

A

---

Align（定位）

在 Flutter 中，Align 是一个用于定位子部件的小部件（widget）。它允许你将子部件相对于父部件进行定位，类似于CSS中的position: absolute或Android中的布局参数。Align 小部件通常用于将子部件放置在父部件的特定位置，并且可以根据需要进行调整。

Align小部件有以下常用属性：

alignment：用于指定子部件在父部件中的对齐方式。它是一个AlignmentGeometry类型的值，可以是Alignment、FractionalOffset或AlignmentDirectional。Alignment是一个具体的对齐方式，如Alignment.topLeft表示左上角对齐，Alignment.center表示居中对齐。FractionalOffset是一个相对于父部件大小的偏移量，可以用于更精细的对齐控制。AlignmentDirectional是根据文本方向来确定对齐方式的，可以用于支持从右到左的布局。

widthFactor和heightFactor：用于调整子部件的宽度和高度。它们是一个double类型的值，表示子部件相对于父部件的宽度和高度的比例。例如，设置widthFactor为2.0，子部件的宽度将是父部件宽度的两倍。

child：用于指定要对齐的子部件。

代码示例：

Align(
  alignment: Alignment.center,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

AppBar

在Flutter中，AppBar是一个用于显示在屏幕顶部的Material Design风格的应用栏。AppBar通常包含应用程序的标题、图标、操作按钮（如菜单按钮、返回按钮）以及其他与应用程序导航和操作相关的元素。以下是一些AppBar的主要属性和特性：

1. title属性： 通过title属性，你可以设置AppBar的标题。这通常是一个Text小部件，但也可以是任何其他可以显示文本的小部件。
2. actions属性： 使用actions属性，你可以在AppBar的右侧添加一组操作按钮。这是一个包含IconButton或其他操作按钮的小部件列表。
3. leading属性： 通过leading属性，你可以在AppBar的左侧添加一个小部件，通常是用于导航返回的图标按钮。
4. backgroundColor属性： backgroundColor属性用于设置AppBar的背景颜色。
5. elevation属性： 通过elevation属性，你可以设置AppBar的海拔高度，控制其在屏幕上的阴影效果。
6. bottom属性： 使用bottom属性，你可以在AppBar的底部添加一个小部件，通常是用于显示选项卡或其他导航控件。

这些只是AppBar的一些常见属性，它还有其他一些属性和方法，可以根据需要进行定制。在Flutter中，AppBar通常与Scaffold一起使用，后者定义了应用程序的基本结构，包括AppBar、底部导航栏和页面内容。

AspectRatio（宽高比）

AspectRatio是Flutter中的一个小部件（widget），用于调整其子部件的宽高比。通常，AspectRatio用于确保子部件在给定的宽高比条件下得到正确的布局。

AspectRatio(
  aspectRatio: 16/9, // 设置宽高比
  child: Container(
    color: Colors.blue,
    child: Center(
      child: Text(
        'Hello, Flutter!',
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
)

主要属性和参数：

• aspectRatio： 一个表示宽高比的值，可以是一个小数，例如 16/9 或 1.5。这是AspectRatio的主要属性，用于指定子部件的宽高比。

• child： 作为子部件传递给AspectRatio的部件。这是AspectRatio包装的实际内容。

在实际应用中，AspectRatio通常用于确保图像、视频或其他具有特定宽高比的内容在布局中得到正确的展示。这对于保持一致的视觉效果非常有用，尤其是在涉及媒体内容的应用程序中。

AndroidView （嵌入原生 Android 视图）

它允许你在Flutter界面中使用原生 Android 视图，这在集成已有的 Android 原生代码或使用 Android 平台特定的功能时非常有用。

关键概念和用法：

1. AndroidView Widget： AndroidView 是一个 Flutter Widget，它包装了一个 Android 视图。你可以在 Flutter 中将其作为一个 Widget 使用，就像其他 Flutter Widget 一样。

2. PlatformViewCreationParams： 在使用 AndroidView 时，你需要提供一个 PlatformViewCreationParams 对象，它包含了与 Android 视图相关的配置信息，如视图类型、初始属性等。

3. PlatformViewFactory： 为了使用 AndroidView，你需要实现一个 PlatformViewFactory，这个工厂负责创建原生视图。通常，你会在 Android 原生代码中创建一个自定义的 View 类，然后通过 PlatformViewFactory 将其与 Flutter 集成。

4. FlutterEngine： AndroidView 通常需要与 FlutterEngine 一起使用，以便在 Flutter 和 Android 之间进行通信。FlutterEngine 是一个用于在 Flutter 和原生平台之间建立通信通道的引擎。

具体使用可以参考这篇文章：Flutter中实现中国省份地图

B

---

BoxDecoration (装饰容器)

在Flutter中，BoxDecoration是一个用于装饰容器（Container）的类，它允许你为容器添加各种装饰效果，比如背景颜色、边框、阴影等。BoxDecoration是Flutter框架中的一部分，用于定制UI元素的外观。

以下是BoxDecoration类的一些主要属性和用法：

1. 颜色（color）： 用于设置容器的背景颜色。

BoxDecoration(
  color: Colors.blue,
)

2. 边框（border）： 用于定义容器的边框样式，包括颜色、宽度和边框的形状。

BoxDecoration(
  border: Border.all(
    color: Colors.black,
    width: 2.0,
  ),
)

3. 圆角（borderRadius）： 用于设置容器的圆角。

BoxDecoration(
  borderRadius: BorderRadius.circular(10.0),
)

4. 阴影（boxShadow）： 用于为容器添加阴影效果。

BoxDecoration(
  boxShadow: [
    BoxShadow(
      color: Colors.grey,
      offset: Offset(2.0, 2.0),
      blurRadius: 5.0,
    ),
  ],
)

5. 渐变（gradient）： 用于设置容器的背景渐变效果。

BoxDecoration(
  gradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [Colors.red, Colors.blue],
  ),
)

C

---

Container

Container是一个常用的布局组件，用于包裹和定位子组件，并提供一些基本的样式和约束。Container类继承自Box，它本身是一个绘制了一个矩形区域的Widget。

以下是一些Container类的常用属性和功能：

1. child属性： 用于指定Container中的子组件，可以是任何Flutter组件。
2. color属性： 用于设置Container的背景颜色。
3. width和height属性： 用于设置Container的宽度和高度。
4. margin和padding属性： 用于设置Container的外边距和内边距。
5. alignment属性： 用于设置Container内部子组件的对齐方式。
6. decoration属性： 用于设置Container的装饰，可以是背景图、边框等。
7. constraints属性： 用于设置Container的约束条件，例如最小和最大宽度、高度等。

Column （列）

在Flutter中，Column是一种布局控件，用于在垂直方向上排列子部件。它是Flex的一种，通常用于构建垂直布局的部分。
常用属性：

1. children： 这是Column中的一个必需属性，它接受一个List，其中包含要在Column中垂直排列的子部件。
2. mainAxisAlignment： 用于设置子部件在垂直方向上的对齐方式，可以是start、end、center、spaceBetween、spaceAround等。
3. crossAxisAlignment： 用于设置子部件在水平方向上的对齐方式，可以是start、end、center、stretch等。

CustomScrollView (自定义滚动)

在Flutter中，CustomScrollView是一个灵活的可滚动视图，它允许你自定义滚动效果，同时包含了多个Sliver子部件，这些子部件可以包括SliverAppBar、SliverList、SliverGrid等。CustomScrollView提供了一种结合多个Sliver来创建复杂滚动效果的机制。

CustomScrollView的一些重要特性和用法：

基本结构：

CustomScrollView(
  slivers: <Widget>[
    // Sliver子部件在这里添加
    SliverAppBar(
      // ...
    ),
    SliverList(
      // ...
    ),
    // 其他Sliver子部件...
  ],
)

主要属性和部件：

1. slivers:

一个包含Sliver子部件的列表。
Sliver是一个基于可滚动部件的抽象，用于提供不同类型的滚动效果，如头部、列表、网格等。

2. CustomScrollView中常用的Sliver部件:

• SliverAppBar:

一个具有扩展、折叠、固定等特性的头部部件。
可以包含在CustomScrollView的slivers列表中，实现吸附效果等。

• SliverList:

一个包含列表项的部件，可以是任何可滚动的部件，如ListView。
可以在CustomScrollView中创建一个垂直滚动的列表。

• SliverGrid:

一个包含网格项的部件，可以是任何可滚动的部件，如GridView。
可以在CustomScrollView中创建一个网格。

• SliverToBoxAdapter:

将一个普通部件转换为Sliver，以便在CustomScrollView中使用。
用于嵌套非Sliver部件。

3. scrollDirection:

滚动方向，可以设置为Axis.vertical（垂直滚动）或Axis.horizontal（水平滚动）。

4. physics:

定义滚动效果的物理特性，如BouncingScrollPhysics、ClampingScrollPhysics等。

5. controller:

一个可选的滚动控制器，用于控制CustomScrollView的滚动位置。

6. cacheExtent
cacheExtent属性用于定义预加载区域的大小。当滚动到边界时，CustomScrollView会提前加载一定范围内的内容，以提高滚动性能。cacheExtent的值通常是一个比较大的正数，表示预加载区域的大小。默认情况下，cacheExtent的值为null，表示不进行预加载。

7. shrinkWrap
shrinkWrap属性用于控制滚动区域的尺寸调整。当shrinkWrap为true时，CustomScrollView会根据其内容的尺寸来调整自身的尺寸。这意味着CustomScrollView会尽可能地缩小自身的尺寸，以适应内容的大小。当shrinkWrap为false时，CustomScrollView会尽可能地扩展自身的尺寸，以填充可用空间。

示例：

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      expandedHeight: 200.0,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('CustomScrollView Example'),
        background: Image.network('https://ts3.cn.mm.bing.net/th?id=ORMS.33a94a7362cf4f30ad92a2ed77de5ca5&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1.2395833730697632&p=0', fit: BoxFit.cover),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
        childCount: 50,
      ),
    ),
  ],
)

这个示例中，CustomScrollView包含了一个带有扩展头部的SliverAppBar和一个包含50个列表项的SliverList。你可以根据需要组合不同的Sliver部件以创建各种滚动效果。

D

---

Divider (分割线)

在Flutter中，Divider是一个用于在布局中创建分隔线的简便方法的widget。Divider通常用于在列表或其他垂直空间中创建可视的分隔线，以增加视觉分离或组织信息。
Divider的主要属性包括：

1. color： 用于设置分隔线颜色的属性。可以指定Color对象，例如Colors.red，或使用Colors类中的其他预定义颜色。
2. height： 用于设置分隔线的高度。可以指定一个具体的高度值，如height: 2.0，也可以使用DividerThemeData中的高度。
3. thickness： 用于设置分隔线的厚度。可以指定一个具体的厚度值，如thickness: 2.0。
4. indent和endIndent： 这两个属性用于设置分隔线的开始和结束缩进。可以通过它们调整分隔线的水平位置。

DraggableScrollableSheet （可拖动和滚动的底部表单）

DraggableScrollableSheet 是 Flutter 中用于创建可拖动和滚动的底部表单或面板的一个组件。它通常用于实现一种用户界面模式，其中用户可以通过拖动底部面板来显示或隐藏内容。这个组件的外观和行为类似于底部抽屉，但提供了更灵活的滚动行为。

关键特性和使用方式：

1. 可拖动性（Draggable）：
   用户可以通过触摸和拖动的方式来展开或收缩底部面板。通过用户手势的识别和处理来实现。
2. 滚动性（Scrollable）：
   底部面板的内容可以是可滚动的，这意味着可以包含一个滚动视图，如 ListView、ScrollView 或其他支持滚动的组件。
3. 高度调整：
   底部面板的高度可以动态调整，可以是一个固定的高度，也可以是一个百分比。这使得底部面板能够适应不同的内容和屏幕尺寸。
4. 背景透明度：
   可以通过设置底部面板的透明度来实现一些特殊的视觉效果，比如让底部面板的内容在展开时部分透明。

示例：

DraggableScrollableSheet(
          builder: (BuildContext context, ScrollController scrollController) {
            return Container(
              color: Colors.blue[100],
              child: ListView.builder(
                controller: scrollController,
                itemCount: 30,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
              ),
            );
          },
        ),

E

---

ElevatedButton（升起按钮）

ElevatedButton是Flutter中的一种按钮组件，它具有升起的外观，通常用于强调主要操作。ElevatedButton是MaterialButton的一个子类，因此它遵循材质设计规范，并包含一些常见的按钮属性。
常用属性：

1. onPressed： 按钮点击时触发的回调函数，通常用于执行相应的操作。
2. child： 设置按钮上显示的子组件，通常是Text或Icon等。
3. style： 用于设置按钮的样式，可以通过ElevatedButton.styleFrom静态方法来定义样式，例如设置背景颜色、文本颜色等。
4. autofocus： 用于设置按钮是否自动获取焦点。

Expanded (扩展)

在Flutter中，Expanded是一个用于占据剩余空间的widget，通常用于Row、Column或Flex等布局中。它会让包含它的widget扩展并填充可用的空间，以便更好地利用父widget提供的可用空间。
Expanded的作用是将包含在它内部的widget拉伸以填充可用空间，而不是根据它们的固定尺寸来渲染。这对于在布局中灵活地分配可用空间非常有用。

F

---

Flexible (比例)

Flexible是Flutter中用于灵活布局的一个重要的widget。它通常用于Row、Column和Flex等具有Flex容器的父级中，以指定子级widget在主轴方向（水平或垂直方向）上的伸缩比例，从而实现灵活的布局。
Flexible主要有两个参数：flex和fit。

1. flex参数： 用于指定子级在Flex容器中占用的相对空间比例。例如，如果一个Row包含两个子级，一个Flexible的flex值为2，另一个Flexible的flex值为1，那么前者将占用比例为2:1的空间，实现了灵活的布局。
2. fit参数： 用于指定子级在剩余空间分配时的行为。可选的值有FlexFit.tight（默认值）和FlexFit.loose。

• FlexFit.tight：子级会尽可能地占据剩余空间，直到达到最大限制。这通常用于希望填充整个可用空间的子级。
• FlexFit.loose：子级会尽可能地小，以适应剩余空间。这通常用于希望保持原始尺寸或根据内容自动调整大小的子级。

FocusNode（焦点）

在Flutter中，FocusNode是用于管理焦点的类之一。它允许你控制焦点在用户界面中的移动，并与焦点相关的交互。

1. 焦点控制：
   FocusNode允许你创建一个焦点节点，你可以将其附加到可接收焦点的任何可视化元素上，比如TextField、TextFormField、RawKeyboardListener等。

2. 焦点监听：
   你可以通过FocusNode注册监听器来监听焦点的变化。当焦点从一个节点移动到另一个节点时，你可以执行自定义操作。

3. 焦点操作：
   FocusNode提供了一系列方法来控制焦点，比如requestFocus()用于请求焦点、unfocus()用于取消焦点、canRequestFocus用于检查节点是否能够接受焦点等。

4. 焦点范围：
   多个FocusNode可以放置在FocusScope中，形成一个焦点范围。这样可以在特定范围内管理焦点，限制焦点移动的范围。

5. 键盘交互：
   使用FocusNode可以在用户与输入框交互时控制键盘的显示和隐藏，以及处理焦点切换时的逻辑。

示例用法：

FocusNode myFocusNode = FocusNode();

// 在输入框中使用FocusNode
TextField(
  focusNode: myFocusNode,
  // 其他属性...
);

// 监听焦点变化
myFocusNode.addListener(() {
  if (myFocusNode.hasFocus) {
    // 处理获得焦点时的逻辑
  } else {
    // 处理失去焦点时的逻辑
  }
});

// 请求焦点
myFocusNode.requestFocus();

// 取消焦点
myFocusNode.unfocus();

G

---

GridView

一个用于显示二维网格或列表的小部件，其中的子部件可以在水平和垂直方向上排列。它是Flutter框架中非常强大和灵活的部件之一，常用于显示大量数据，如图像、文本等。

主要特性：

1. 网格布局： GridView 提供了一个网格布局，允许子部件在水平和垂直方向上自由排列。你可以指定列数或使用默认的列数。

2. 不同的子部件尺寸： 子部件可以具有不同的尺寸，GridView 会自动根据指定的布局算法调整它们的位置。

3. 滚动： 当网格中的子部件超过屏幕大小时，GridView 可以嵌套在 ListView 中，支持滚动。

4. 构建懒加载： GridView.builder 允许你按需构建子部件，从而有效地处理大量数据。

5. 自定义网格项： 你可以自定义网格项，使其适应你的设计需求，甚至包含复杂的子部件结构。

使用方式：

a. 使用GridView.count：

GridView.count(
  crossAxisCount: 2,
  children: List.generate(10, (index) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text('Item $index'),
      ),
    );
  }),
)

b. 使用GridView.builder：

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 8.0,
    mainAxisSpacing: 8.0,
  ),
  itemBuilder: (context, index) {
    return Container(
      color: Colors.green,
      child: Center(
        child: Text('Item $index'),
      ),
    );
  },
  itemCount: 20,
)

关于GridView更多信息详见我的这篇文章：Flutter组件GridView使用介绍

H

---

Hero (共享元素动画)

一个用于创建共享元素动画的Widget。共享元素动画是一种让两个页面之间的元素平滑过渡的动画，其中一个页面上的元素在切换到另一个页面时会变换其位置、大小、颜色等属性，以使得用户感知到这个元素在两个页面之间的连续性。

Hero Widget 的主要目的是在两个页面之间传递 Widget，并在它们之间创建平滑的动画效果。Hero 的使用通常涉及两个页面，其中一个页面包含Hero Widget，而另一个页面也包含具有相同tag的 Hero Widget。这两个 Hero Widget 之间的动画效果会在页面切换时自动发生。

以下是一个简单的例子，展示了如何在两个页面之间使用 Hero:

// 页面1
class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => Page2(),
            ),
          );
        },
        child: Hero(
          tag: 'hero-tag',
          child: Container(
            height: 100.0,
            width: 100.0,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

// 页面2
class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: 'hero-tag',
          child: Container(
            height: 300.0,
            width: 300.0,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

在上面的例子中，Hero Widget 的 tag 属性在两个页面中是相同的，这就是它们之间的联系。当用户点击页面1上的蓝色方块时，页面切换到页面2，并且 Hero 动画将会自动发生，平滑地将蓝色方块从页面1过渡到页面2，并且根据 Hero 的属性（位置、大小等）执行动画。

I

---

Image （图片）

在Flutter中，Image是用于显示图像的小部件。它支持从不同来源加载图像，如本地资源、网络、内存、文件等，并提供了多种方式来控制图像的显示方式和装饰。

常用的Image小部件

1. Image.asset():
用于从Flutter应用程序的资源包中加载图像。需要指定图像的路径，如assets/images/example.png。

Image.asset('assets/images/example.png')

2. Image.network():
从网络加载图像，需要提供图像的URL。

Image.network('https://example.com/image.jpg')

3.Image.file():
用于显示本地文件系统中的图像。

Image.file(File('path/to/image.jpg'))

4.Image.memory():
从内存加载图像，通常用于加载通过网络下载的图像或处理过的图像数据。

Image.memory(Uint8List)

图像的常用属性和方法

• fit属性：
  控制图像在容器中的适应方式，如BoxFit.cover、BoxFit.fill等。

• width和height属性：
  用于指定图像的宽度和高度。

• alignment属性：
  控制图像在其容器中的对齐方式。

• color和colorBlendMode属性：
  允许对图像应用颜色和混合模式。

• repeat属性：
  用于指定图像在布局中重复的方式。

• image属性：
  可以直接指定一个ImageProvider对象，如NetworkImage、AssetImage等，用于加载图像。

示例：

Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

J

---

K

---

key （widget中的key）

在Flutter中，Key是一个用于标识和唯一标记widget的抽象类。Key的主要目的是确保在widget树中的不同位置插入、删除或移动widget时，Flutter能够正确地识别和管理这些变化。以下是Flutter中常用的一些Key的子类和它们的主要作用：

1. ValueKey： ValueKey是一个基于对象值的Key，用于标识具有相同值的widget。例如，当你想要在widget树中区分两个相似但具有不同数据的widget时，可以使用ValueKey。

ValueKey<String>('myStringValue')

2. ObjectKey： ObjectKey也是一个基于对象的Key，但它不仅考虑对象的值，还考虑对象的身份标识。如果两个对象具有相同的标识，它们将被认为是相同的widget。

ObjectKey(myObject)

3. UniqueKey： UniqueKey是一个特殊的Key，每次创建时都会生成一个唯一的标识符。它通常用于在widget树中确保每个实例都是唯一的，例如在动态生成widget时。

UniqueKey()

4. GlobalKey： GlobalKey是Key的一个重要子类，用于在整个应用程序的widget树中唯一标识一个widget。GlobalKey通常用于在widget树之间共享状态，或者在Navigator中进行页面之间的导航。

GlobalKey<MyWidgetState>()

5. LocalKey： LocalKey是Key的一个抽象子类，用于标识和唯一标记一个widget的局部关系。LocalKey的常见子类包括ValueKey和UniqueKey。

这些Key的使用是可选的，但在某些情况下，特别是在管理widget状态或在widget树中正确执行一些操作时，它们非常有用。选择适当的Key取决于你的具体需求和使用场景。

L

---

LimitedBox （布局限制类 Widget）

LimitedBox 是 Flutter 中的一个布局限制类 Widget，它用于限制其子部件的最大宽度和/或最大高度。LimitedBox 在一些特定场景下非常有用，例如，你想要确保一个部件不会超过一定的尺寸，但仍然希望它能够根据需要进行布局。
LimitedBox 的构造函数如下：

LimitedBox({
  Key? key,
  double maxWidth = double.infinity,
  double maxHeight = double.infinity,
  Widget? child,
})

主要参数包括：

• maxWidth: 子部件的最大宽度，默认为无穷大（double.infinity）。
• maxHeight: 子部件的最大高度，默认为无穷大（double.infinity）。
• child: 子部件。

使用 LimitedBox 的目的是确保其子部件不会超过指定的宽度和高度。如果子部件本身的大小小于指定的最大宽度和最大高度，它将保持原始大小。如果子部件的大小超过了指定的最大宽度和最大高度，LimitedBox 会缩放子部件，以使其适应限制的尺寸。

以下是一个简单的示例，演示了如何使用 LimitedBox：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('LimitedBox Example')),
        body: Center(
          child: LimitedBox(
            maxWidth: 200.0,
            maxHeight: 150.0,
            child: Container(
              color: Colors.blue,
              width: 250.0,
              height: 200.0,
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中，LimitedBox 的 maxWidth 设置为 200.0，maxHeight 设置为 150.0，而包含在其中的 Container 的宽度为 250.0，高度为 200.0。由于 LimitedBox 的限制，Container 会被缩放以适应限制的尺寸，因此最终的显示结果将是一个宽度为 200.0，高度为 150.0 的蓝色容器。

M

---

Material （Material Design）

在Flutter中，Material 是一个用于实现Material Design风格的基础视觉元素的类。Material 类本身通常不直接使用，而是作为整个用户界面（UI）的根部件，包裹在MaterialApp 中，以便应用程序的整体外观和感觉符合 Material Design 的设计准则。
下面是一个简单的使用 Material 的示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Material(
        child: Center(
          child: Text(
            'Hello, Flutter!',
            style: TextStyle(fontSize: 24.0),
          ),
        ),
      ),
    );
  }
}

在这个示例中，Material 包裹了一个居中显示的文本部件。Material 为应用提供了 Material Design 中定义的一些特性，如阴影、颜色和动画效果。同时，它也是构建 Material Design 风格应用的基础。

通常情况下，更常用到的是 MaterialApp，因为它本身包含了一个Material部件，并且提供了一些应用级别的配置，比如主题、导航等。

MergeSemantics

MergeSemantics是Flutter中的一个小部件，用于改变在语义树中合并其子树的方式。语义树是一个表示应用程序界面元素的树形结构，用于辅助技术和可访问性。MergeSemantics主要用于改变子部件的语义合并行为。

MergeSemantics(
  child: Row(
    children: [
      Semantics(
        label: 'Button 1',
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Button 1'),
        ),
      ),
      Semantics(
        label: 'Button 2',
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Button 2'),
        ),
      ),
    ],
  ),
)

在这个例子中，MergeSemantics包装了一个Row，而Row中有两个带有语义信息的ElevatedButton。MergeSemantics的作用是合并其子树中的语义信息，确保在语义树中只有一个按钮被报告。

主要属性和参数：

• child： 作为子部件传递给MergeSemantics的部件。这是MergeSemantics包装的实际内容。

MergeSemantics通常在需要将一组相关但实际上是一个整体的部件合并到单个语义节点中时使用。这对于确保屏幕阅读器或其他辅助技术能够正确理解和导航应用程序的界面结构非常有用。

N

---

NestedScrollView （嵌套滑动）

在Flutter中，NestedScrollView是一个用于实现可嵌套滚动的widget，它允许在一个滚动视图内包含另一个滚动视图。这对于创建复杂的滚动效果，如带有可折叠的标题栏或横向和纵向滚动的视图，非常有用。NestedScrollView通常与Sliver系列的widget（如SliverAppBar、SliverList等）一起使用。
以下是一个简单的例子，演示了如何使用NestedScrollView和SliverAppBar创建一个带有可折叠标题栏的布局：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('NestedScrollView Example'),
                background: Image.network(
                  'https://b.zol-img.com.cn/sjbizhi/images/11/1080x1920/1592967802496.jpg',
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ];
        },
        body: ListView.builder(
          itemCount: 50,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text('Item $index'),
            );
          },
        ),
      ),
    );
  }
}

在这个例子中，NestedScrollView包含了一个SliverAppBar和一个ListView。SliverAppBar的expandedHeight属性定义了可折叠部分的最大高度，pinned属性确保标题栏在滚动时固定在顶部，而floating属性定义了是否在滚动时自动隐藏标题栏。
效果图：

O

---

OutlinedButton（轮廓按钮）

在Flutter中，OutlinedButton是一种按钮组件，用于创建具有轮廓边框的按钮。这种按钮通常用于次要操作，与TextButton和ElevatedButton等按钮组件相比，它的外观更为轻量。OutlinedButton是MaterialButton的子类，因此它也遵循材质设计规范。
常用属性：

1. onPressed： 按钮点击时触发的回调函数，通常用于执行相应的操作。
2. child： 设置按钮上显示的子组件，通常是Text或Icon等。
3. style： 用于设置按钮的样式，可以通过OutlinedButton.styleFrom静态方法来定义样式，例如设置轮廓边框的颜色、文本颜色等。
4. autofocus： 用于设置按钮是否自动获取焦点。

Opacity （透明度）

Opacity是Flutter中的一个小部件，用于调整其子部件的不透明度。通过Opacity，你可以使子部件变得透明，从而影响其在布局中的可见性。

Opacity(
  opacity: 0.5, // 设置不透明度，取值范围为0.0（完全透明）到1.0（完全不透明）
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: Center(
      child: Text(
        'Hello, Flutter!',
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
)

主要属性和参数：
opacity： 一个表示不透明度的值，取值范围为0.0（完全透明）到1.0（完全不透明）。Opacity的主要属性，用于指定子部件的不透明度。

child： 作为子部件传递给Opacity的部件。这是Opacity包装的实际内容。

Opacity对于实现渐变、淡入淡出效果或在特定条件下隐藏部件等场景非常有用。在处理用户界面时，使用Opacity可以提供更灵活的可见性控制。

P

---

PhysicalModel （阴影、裁剪）

PhysicalModel 是 Flutter 中的一个 Widget，它可以在子部件周围创建一个物理模型（physical model）效果。物理模型通常用于为 UI 元素添加阴影、裁剪等效果，使其看起来更加立体和真实。

PhysicalModel 的构造函数如下：

PhysicalModel({
  Key? key,
  required this.color,
  this.shadowColor = const Color(0xFF000000),
  this.elevation = 0.0,
  this.bordeRadius = BorderRadius.zero,
  this.clipBehavior = Clip.none,
  Widget? child,
})

下面是关于 PhysicalModel 的一些参数说明：

• color: 设置物理模型的颜色。
• shadowColor: 设置物理模型的阴影颜色，默认为黑色。
• elevation: 设置物理模型的高度（elevation），即阴影的程度。值越大，阴影越明显。
• borderRadius: 设置物理模型的边框半径。
• clipBehavior: 设置裁剪行为，默认为 Clip.none，表示不进行裁剪。
• child: 要包裹的子部件。

下面是一个简单的例子，演示如何使用 PhysicalModel：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PhysicalModel Example'),
        ),
        body: Center(
          child: PhysicalModel(
            color: Colors.blue,
            shadowColor: Colors.black,
            elevation: 5.0,
            borderRadius: BorderRadius.circular(10.0),
            clipBehavior: Clip.antiAlias,
            child: Container(
              width: 100.0,
              height: 100.0,
              child: Center(
                child: Text(
                  'Hello',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Positioned (Stack 布局中定位)

Positioned 是一个用于 Stack 布局中的 Widget，它允许你对 Stack 中的子部件进行精确的定位。

Positioned 的作用是在 Stack 中定位子部件，并控制它们相对于 Stack 的位置、尺寸和层级顺序。它需要作为 Stack 的子部件使用，并且只有在 Stack 中使用 Positioned 才有效果。
Positioned 的构造函数如下：

Positioned({
  Key? key,
  double? left,
  double? top,
  double? right,
  double? bottom,
  double? width,
  double? height,
  required Widget child,
})

以下是 Positioned 的一些关键参数：

• left: 指定部件左边缘相对于 Stack 左边缘的偏移量。
• top: 指定部件顶部边缘相对于 Stack 顶部边缘的偏移量。
• right: 指定部件右边缘相对于 Stack 右边缘的偏移量。
• bottom: 指定部件底部边缘相对于 Stack 底部边缘的偏移量。
• width: 指定部件的宽度。
• height: 指定部件的高度。
• child: Positioned 中的子部件

Positioned 通常用于 Stack 布局的子部件中，可以通过设置 left、top、right 和 bottom 参数来确定子部件相对于 Stack 的具体位置，也可以使用 width 和 height 来定义子部件的尺寸。
下面是一个示例，演示了如何在 Stack 中使用 Positioned 来定位子部件：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Positioned Example')),
        body: Center(
          child: Stack(
            children: <Widget>[
              Container(
                color: Colors.blue,
              ),
              Positioned(
                left: 20.0,
                top: 50.0,
                child: Container(
                  width: 100.0,
                  height: 100.0,
                  color: Colors.red,
                ),
              ),
              Positioned(
                right: 30.0,
                bottom: 70.0,
                child: Container(
                  width: 150.0,
                  height: 150.0,
                  color: Colors.green,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，Stack 包含了两个彩色的 Container，并使用了两个 Positioned Widget 来定位它们。第一个 Positioned 将红色 Container 定位在 Stack 左上角偏移了一定距离，而第二个 Positioned 将绿色 Container 定位在 Stack 右下角偏移了另一定距离。
补充：

bottom: 0.0,
left: 0.0,
right: 0.0,

此属性可使控件在底部中间位置显示。

Q

---

R

---

Row （行）

用于在水平方向排列其子组件。Row将其子组件按照水平方向依次排列，类似于Web开发中的Flexbox布局中的水平排列方式。
以下是Row常用的属性和功能：

1. children属性： Row的子组件列表，可以是任何Flutter组件，如文本(Text)、图像(Image)、按钮(Button)等。
2. mainAxisAlignment属性： 用于控制子组件在Row的主轴方向（水平方向）上的对齐方式。
3. crossAxisAlignment属性： 用于控制子组件在Row的交叉轴方向（垂直方向）上的对齐方式。
4. mainAxisSize属性： 用于确定Row在主轴方向上的大小。
5. textDirection属性： 用于控制Row中子组件的文本方向，从左到右或从右到左。

Row是一个灵活且常用的布局组件，常用于创建水平方向的布局结构，如按钮栏、工具栏、导航栏等。

RichText (富文本)

在Flutter中，RichText小部件允许在文本中应用不同的样式和格式。相较于Text小部件，它提供了更多的灵活性，可以在同一段文本中使用不同的样式、字体、大小或颜色。这使得RichText成为处理富文本和复杂文本样式的理想选择。

RichText的重要属性和使用方式：

1.text属性：

TextSpan对象的列表，用于指定要显示的文本和其样式。

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'world',
        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
      ),
      TextSpan(
        text: '!',
        style: TextStyle(fontStyle: FontStyle.italic),
      ),
    ],
  ),
)

2.TextSpan：
用于定义文本片段的样式和内容，可以嵌套使用以构建多样式文本。

3.TextAlign和textDirection属性：
控制文本的对齐方式和方向。

4.overflow属性：
定义文本溢出时的处理方式，例如截断或省略号。

5.maxLines和textScaleFactor属性：
控制文本行数和文本的缩放因子。

6.recognizer属性：
允许将手势识别器与文本链接或特定部分的交互关联起来，例如点击事件等。

RefreshIndicator (刷新组件)

Flutter中的RefreshIndicator是一个用于实现下拉刷新的组件，通常用于包裹ListView、GridView等可滚动组件，以提供下拉刷新的功能。

关于RefreshIndicator的一些详细介绍：

在Flutter中，RefreshIndicator是一个用于实现下拉刷新的小部件（widget）。它提供了一个下拉刷新的视觉效果，并在用户下拉列表时触发一个回调函数，以便你可以执行刷新操作。

RefreshIndicator小部件通常与ListView或GridView等可滚动小部件一起使用。当用户下拉列表时，RefreshIndicator会显示一个刷新指示器，并在用户松开手指后触发onRefresh回调函数。

以下是RefreshIndicator小部件的一些常用属性：

• child：要包装的可滚动小部件，通常是ListView或GridView。
• onRefresh：下拉刷新时触发的回调函数。你可以在这个回调函数中执行刷新操作，比如重新加载数据。
• color：刷新指示器的颜色。
• backgroundColor：刷新指示器的背景颜色。
• notificationPredicate：一个回调函数，用于决定是否应该触发刷新操作。默认情况下，只有当用户在列表顶部下拉时才会触发刷新操作。
• displacement：刷新指示器的位移量，即下拉刷新指示器的高度。
• semanticsLabel：用于辅助功能的文本标签，描述刷新指示器的用途。

示例代码：

RefreshIndicator(
  onRefresh: _refreshData,
  child: ListView.builder(
    itemCount: _data.length,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text(_data[index]),
      );
    },
  ),
)

S

---

Stack （堆叠控件）

Stack 允许子部件重叠，可以自由地控制它们的位置、层级关系以及尺寸。
Stack 的构造函数如下：

Stack({
  Key? key,
  AlignmentGeometry alignment = AlignmentDirectional.topStart,
  TextDirection? textDirection,
  StackFit fit = StackFit.loose,
  Clip clipBehavior = Clip.none,
  List<Widget> children = const <Widget>[],
})

以下是关于 Stack 的一些参数说明：

• alignment: 设置子部件在 Stack 中的对齐方式，默认为 AlignmentDirectional.topStart，即顶部开始位置对齐。
• textDirection: 用于确定文本方向，通常由父级部件提供。
• fit: 定义子部件如何适应 Stack 的空间，默认为 StackFit.loose。StackFit.loose 允许子部件根据自身尺寸自由布局，StackFit.expand 则让子部件充满 Stack 的空间。
• clipBehavior: 设置裁剪行为，默认为 Clip.none，表示不进行裁剪。
• children: Stack 中包含的子部件列表。

以下是一个简单的例子，演示如何使用 Stack：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stack Example')),
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
              Container(
                width: 150,
                height: 150,
                color: Colors.red,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，Stack 包含了三个彼此重叠的彩色 Container。由于它们都被放置在同一个 Stack 中，并且未指定具体位置，它们默认会在 Stack 的左上角（默认的 AlignmentDirectional.topStart）开始堆叠。你可以通过调整它们的位置和 alignment 属性来控制它们在 Stack 中的显示位置。

SafeArea （安全区域）

SafeArea是Flutter中的一个widget，用于确保其子widget不会被设备的屏幕边缘或状态栏覆盖。在移动设备上，特别是在一些带有凹口或刘海的屏幕上，设备屏幕的某些区域可能不可见或受到限制。SafeArea会自动适应这些限制，确保应用的内容不会被截断或遮挡。
SafeArea的主要属性包括：

1. top、bottom、left、right： 这些属性允许你进一步控制SafeArea的边距，以确保子widget在特定边缘的安全区域内。
2. minimum： 用于指定SafeArea的最小边缘距离。

Semantics (UI语义)

在Flutter中，Semantics是一个重要的类，用于提供有关用户界面（UI）的语义信息，以使应用程序更加可访问。通过使用Semantics，你可以为你的应用程序添加语音助手、屏幕阅读器等辅助技术提供有关界面的详细信息。这对于构建包容性强的应用程序，使得所有用户都能方便地使用你的应用程序至关重要。

Semantics的一些重要概念和用法：

1. 语义节点（SemanticsNode）： Semantics通过SemanticsNode在widget树中表示语义信息。这些节点构成了一个语义树，反映了UI树的语义结构。
2. 标签和属性： 通过Semantics的label属性，你可以为一个widget提供文本标签，描述该widget的作用。hint属性用于提供额外的描述信息。例如：

Semantics(
  label: '搜索按钮',
  hint: '点击此按钮以执行搜索操作',
  child: IconButton(
    icon: Icon(Icons.search),
    onPressed: () {
      // 执行搜索操作
    },
  ),
)

3. 隐藏语义信息： 有时，某些widget可能不应该提供语义信息，你可以使用ExcludeSemantics widget将其排除在语义树之外。

ExcludeSemantics(
  child: // Your widget here,
)

4. 自定义语义信息： 你可以使用CustomSemantics widget来提供自定义的语义信息。这对于一些复杂的自定义widget很有用。

CustomSemantics(
  child: // Your widget here,
  semantics: SemanticsProperties(
    label: 'Custom label',
    value: 'Custom value',
    // Other properties...
  ),
)

5. 控制语义节点的可见性： 通过excludeSemantics属性，你可以动态控制Semantics的可见性。这对于需要根据应用程序状态动态更改语义信息的情况很有用。

Semantics(
  excludeSemantics: shouldExcludeSemantics,
  // Your widget here,
)

总体而言，Semantics在Flutter中是一个强大的工具，它使得应用程序更加可访问，同时也能提高用户体验。通过为你的widget提供适当的语义信息，可以确保所有用户，包括那些使用辅助技术的用户，都能够轻松地与你的应用程序进行交互。

SizedBox （指定大小的容器）

在Flutter中，SizedBox是一个用于设置特定大小的容器的小部件。它通常用于在布局中设置间距或指定特定尺寸的空间。

以下是SizedBox的一些主要属性和用法：

1. width和height： 通过width和height属性，你可以指定SizedBox的宽度和高度
2. child： child属性用于包裹SizedBox中的其他小部件，这样就可以将特定大小的空间分配给内部小部件。
3. width和height的限制： SizedBox可以用于限制子部件的最大和最小宽度和高度。
4. 调整大小： 还可以使用expand属性将SizedBox扩展以填充可用空间。设置width或height为double.infinity可以达到相同的效果。

SizedBox.expand(
  child: // Your child widget goes here,
)

SliverAppBar (可折叠的应用栏)

SliverAppBar是Flutter中的一个特殊的AppBar，它通常与CustomScrollView一起使用，用于创建具有灵活折叠效果的应用栏。SliverAppBar可以随着用户滚动而动态调整大小，同时支持在展开和折叠状态之间进行平滑的动画过渡。
以下是一些SliverAppBar的关键属性和用法：

1. expandedHeight: 用于定义AppBar在展开状态时的最大高度。在展开时，SliverAppBar会占用这个高度，然后在滚动时逐渐减小。
2. floating: 一个布尔值，表示当用户向下滚动时，是否自动将AppBar固定在屏幕顶部。如果设置为true，则向下滚动时AppBar会自动隐藏，向上滚动时又会出现。
3. pinned: 一个布尔值，表示在折叠状态时，AppBar是否保持固定在屏幕顶部。如果设置为true，则折叠状态下AppBar会保持可见。
4. flexibleSpace: 一个FlexibleSpaceBar widget，用于定义在展开和折叠状态之间切换时的空间。通常包含一些可折叠的内容，比如图片、标题等。

SliverToBoxAdapter (特殊的Sliver)

SliverToBoxAdapter是Flutter中的一个特殊Sliver widget，它允许你将普通的非Sliver的Widget嵌套到CustomScrollView等支持Sliver的滚动视图中。在Flutter中，Sliver是一种特殊的可滚动的区域，通常用于实现自定义的滚动效果。

SliverToBoxAdapter的主要作用是将普通的Widget包装成Sliver格式，使其能够与其他Sliver组件一起协同工作。它在CustomScrollView中的slivers列表中使用，允许你混合使用Sliver和非Sliver的Widget。

以下是一个简单的例子，演示了如何使用SliverToBoxAdapter：

CustomScrollView(
  slivers: [
    SliverAppBar(
      // SliverAppBar配置...
    ),
    SliverToBoxAdapter(
      child: Container(
        height: 100.0,
        color: Colors.blue,
        child: Center(
          child: Text('This is a SliverToBoxAdapter'),
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
        childCount: 20,
      ),
    ),
  ],
)

在上述示例中，SliverToBoxAdapter包含一个高度为100的蓝色Container，该Container中包含一个文本，这是一个非Sliver的Widget。然后，SliverList包含一系列的ListTile，它们作为Sliver在CustomScrollView中滚动。

使用SliverToBoxAdapter时需要注意：

1. SliverToBoxAdapter只有一个child属性，用于指定包装的非Sliver的Widget。
2. SliverToBoxAdapter是一种将普通Widget嵌套到Sliver环境中的简便方式，但在性能方面可能不如其他更专门的Sliver组件。在性能要求较高的情况下，可以考虑使用更专门的Sliver组件。

SliverPersistentHeader （可滚动折叠头部的Widget）

在Flutter中，SliverPersistentHeader是一个用于实现具有持久性的可滚动折叠头部的Widget。它通常用于CustomScrollView中，允许你创建一个可以在滚动过程中保持在屏幕顶部的头部。

SliverPersistentHeader的基本介绍和用法：
基本结构：

SliverPersistentHeader(
  delegate: MySliverPersistentHeaderDelegate(),
  pinned: true, // 是否固定在屏幕顶部
  floating: false, // 是否在滚动过程中显示
)

主要属性：

1. delegate:

• SliverPersistentHeaderDelegate 类的实例，该实例定义了头部的外观和行为。
• 通常，你需要创建一个自定义的SliverPersistentHeaderDelegate类来管理头部的外观和行为。

2. pinned:

• 一个布尔值，表示头部是否应该在滚动中被固定在屏幕顶部。
• 如果设置为true，则头部将保持在屏幕顶部，直到滚动完全完成。

3. floating:

• 一个布尔值，表示头部是否在滚动过程中显示。
• 如果设置为true，则头部在滚动时会浮动显示，而不是完全隐藏。

自定义SliverPersistentHeaderDelegate：
要使用SliverPersistentHeader，你需要创建一个自定义的SliverPersistentHeaderDelegate类。该类应该至少包含以下三个方法：

• build(BuildContext context, double shrinkOffset, bool overlapsContent):
  该方法返回一个Widget，表示头部的外观。
  shrinkOffset表示当前头部折叠的偏移量。
  overlapsContent表示头部是否与内容重叠。
• getMaxExtent():
  返回头部的最大高度。
• getMinExtent():
  返回头部的最小高度。

简单的示例：

class MySliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    // 返回头部的外观
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text('Header'),
      ),
    );
  }

  @override
  double getMaxExtent() {
    // 返回头部的最大高度
    return 200.0;
  }

  @override
  double getMinExtent() {
    // 返回头部的最小高度
    return 100.0;
  }

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    // 是否需要重建头部
    return false;
  }
}

使用SliverPersistentHeader可以实现一些复杂而灵活的头部效果，比如可折叠、渐变、缩放等。

Scaffold (脚手架)

在Flutter中，Scaffold是一个用于实现基本的Material Design布局结构的小部件。Scaffold定义了应用程序的基本框架，包括应用栏（AppBar）、抽屉菜单、底部导航栏以及应用程序的主要内容区域。以下是Scaffold的主要特性和常见用法：

1. appBar属性： 通过appBar属性，你可以将AppBar添加到Scaffold中，用于显示在屏幕顶部的应用栏。
2. body属性： body属性是Scaffold的主要内容区域，通常包含应用程序的实际内容，例如文本、图像或其他小部件。
3. drawer属性： 通过drawer属性，你可以将一个抽屉菜单添加到Scaffold中。抽屉菜单是一个从屏幕左侧滑出的侧边栏，通常用于放置导航链接和其他应用程序选项。
4. bottomNavigationBar属性： 使用bottomNavigationBar属性，你可以在Scaffold的底部添加一个导航栏，用于快速导航到应用程序的不同部分。
5. floatingActionButton属性： 通过floatingActionButton属性，你可以添加一个悬浮按钮，通常用于触发主要的应用程序操作。
6. backgroundColor属性： backgroundColor属性用于设置Scaffold的背景颜色。
7. resizeToAvoidBottomInset:用于控制界面是否根据键盘的显示或隐藏来调整自身大小，以避免底部插入区域（例如虚拟键盘）对界面布局的影响。

• 当 resizeToAvoidBottomInset 设置为 true 时，Scaffold 会根据键盘的显示或隐藏调整自身的大小，以确保键盘不会覆盖界面的底部内容。这在包含输入框或其他需要用户交互的元素的界面中很有用。
• 如果将 resizeToAvoidBottomInset 设置为 false，则不会自动调整 Scaffold 的大小，而键盘可能会覆盖底部的界面元素。

Scaffold是Flutter应用程序中常用的布局结构之一，它提供了一个方便的方式来组织和管理应用程序的基本外观和导航。

Spacer

在Flutter中，Spacer是一个用于在布局中占据可用空间的小部件。Spacer主要用于Flex和Expanded的上下文中，以便根据权重分配可用空间。以下是关于Spacer的一些重要信息：

1. Flex和Spacer的关系： Spacer通常用于Flex或Column、Row等父部件中，以占据可用空间。Flex是一个灵活的布局容器，Spacer是其子部件之一。
2. 权重分配： 当Spacer被放置在Flex或Expanded的上下文中时，它会占据剩余的可用空间，并根据其权重分配剩余空间。权重是一个用于指定分配比例的值。
3. Expanded的替代品： 在Column或Row中，你还可以使用Expanded小部件来达到类似的效果。Expanded实际上是Flex和Spacer的一种简化，它将Spacer的功能包装在一个更简单的小部件中。
4. 使用场景： Spacer通常在需要动态分配剩余空间的布局中使用，以确保布局的灵活性。例如，在Row中有一些固定大小的元素，而你希望中间的空间被均匀分配，可以使用Spacer或Expanded。

T

---

TextButton（文本按钮）

TextButton是Flutter中的一个按钮组件，它用于创建一个简单的文本按钮，通常用于触发次要操作。TextButton是MaterialButton的一个子类，因此它遵循材质设计规范，并提供一些常见的按钮属性。
常用属性：

1. onPressed： 按钮点击时触发的回调函数，通常用于执行相应的操作。
2. child： 设置按钮上显示的子组件，通常是Text或Icon等。
3. style： 用于设置按钮的样式，可以通过TextButton.styleFrom静态方法来定义样式，例如设置文本颜色、水波纹效果等。
4. autofocus： 用于设置按钮是否自动获取焦点。

Text (文本)

在Flutter中，Text是一个用于显示文本的基本小部件。Text小部件允许你在应用程序中呈现和样式化文本，包括设置字体、颜色、对齐方式等。以下是Text小部件的一些主要属性和用法：

1. 基本用法： 最简单的Text用法是通过Text构造函数传递字符串来显示文本。

Text('Hello, Flutter!')

2. style属性： 使用style属性，可以定义文本的样式，包括字体大小、颜色、字重、字体系列等。

Text(
  'Styled Text',
  style: TextStyle(
    fontSize: 20.0,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    fontFamily: 'Roboto',
  ),
)

3. textAlign属性： textAlign属性用于设置文本的对齐方式，可以是左对齐、右对齐、居中等。
4. overflow属性： overflow属性定义了文本超出可见区域时的处理方式。常见的选项包括ellipsis（省略号）和clip（裁剪）。
5. maxLines属性： maxLines属性限制文本显示的最大行数。
6. textDirection属性： textDirection属性用于设置文本的方向，可以是TextDirection.ltr（从左到右）或TextDirection.rtl（从右到左）。
7. 其他属性： 除了上述属性外，Text还有其他一些属性，如softWrap用于指定文本是否可以自动换行，textScaleFactor用于缩放文本等…

TextEditingController （输入框（TextField）的控制器类）

在Flutter中，TextEditingController 是一个控制文本输入框（TextField）的控制器类，它允许你监听、修改文本框中的文本内容以及设置光标位置。这个控制器提供了一种方便的方式来管理文本框的状态和交互。

以下是 TextEditingController 的一些重要属性和方法：

1. 创建 TextEditingController：

TextEditingController _controller = TextEditingController();

2. 将 TextEditingController 与 TextField 关联：

TextField(
  controller: _controller,
  // 其他TextField属性...
)

3. 获取文本内容：

String text = _controller.text;

4. 设置文本内容：

_controller.text = "新的文本内容";

5. 清空文本内容：

_controller.clear();

6. 监听文本变化：

_controller.addListener(() {
  // 在这里处理文本变化事件
  print("文本变化：${_controller.text}");
});

7. 获取光标位置：

TextSelection selection = _controller.selection;
int cursorPosition = selection.baseOffset;

8. 设置光标位置：

_controller.selection = TextSelection.fromPosition(TextPosition(offset: newPosition));

9. 释放资源：
在 State 对象销毁时，确保释放 TextEditingController 的资源：

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

U

---

暂无

V

---

Visibility （可见性）

在Flutter中，Visibility是一个用于控制子级widget是否可见的widget。它允许你根据特定的条件动态地显示或隐藏其子级。
Visibility主要有三个关键属性：

1. visible： 一个布尔值，用于确定子级是否可见。如果visible为true，则子级可见；如果为false，则子级不可见。

2. child： 要显示或隐藏的子级widget。

3. maintainSize： 一个布尔值，用于确定在子级不可见时是否保留其空间。如果设置为true，则即使子级不可见，它仍然占据与可见时相同的空间；如果设置为false，则子级在不可见时将不占据空间。

Viewport

在 Flutter 中，Viewport 是一个用于显示可滚动区域的基本组件。它是 Scrollable 的一部分，用于管理子组件的滚动和显示。

关于 Viewport 的重要信息：

1. 结构和继承关系：

• Viewport 是一个抽象类，它定义了绘制可滚动区域的基本结构和逻辑。它的实现类包括 RenderViewport，它是 RenderBox 的一个子类，用于在屏幕上绘制可滚动区域。

2. 构造函数：

• Viewport 的构造函数包括一些重要的参数，如：
  • axisDirection：表示滚动方向的枚举，可以是水平、垂直或反向。
  • offset：可滚动区域的初始偏移量。
  • slivers：包含子元素的滑动列表。

3.使用方式：

• 通常，不会直接使用 Viewport，而是使用它的子类 ListView、CustomScrollView 等，它们已经集成了 Viewport 的功能，并提供了更高级的接口。

4.与 RenderBox 的关系：

• RenderViewport 是 RenderBox 的子类，负责将可滚动区域的内容渲染到屏幕上。RenderViewport 使用 Sliver 类型的子组件，例如 SliverList、SliverGrid 等，来管理可滚动区域的内容。

5.滚动控制：

• Viewport 本身并不包含滚动控制逻辑，实际的滚动逻辑通常由 Scrollable 实现。你可以使用 ListView、CustomScrollView 等包含 Viewport 的高级组件，它们提供了更灵活的滚动控制和布局选项。

6.性能优化：

• Viewport 可以用于处理大量的子元素，因为它只会渲染当前可见区域的子元素，而不是全部渲染。这有助于提高性能，尤其是在处理大型数据集时。

W

---

WillPopScope

WillPopScope用于处理用户尝试通过返回按钮（Android设备上的物理返回按钮或iOS设备上的软件返回按钮）退出当前页面的情况。通过使用WillPopScope，你可以自定义返回按钮的行为，以满足应用程序的特定需求。

基本用法
WillPopScope主要包含两个参数：onWillPop和child。

• onWillPop: 一个回调函数，当用户尝试通过返回按钮退出页面时调用。该函数返回一个Future，表示是否允许页面被退出。如果返回true，页面将被退出；如果返回false，则页面将保持不变。

• child: 要包装的子部件，即页面的主要内容。

X

---

暂无

Y

---

暂无

Z

---

暂无

---

↓↓↓ Flutter中你必须要知道的东西 ↓↓↓

---

mounted

在Flutter中，mounted是State类的一个属性，用于检查当前State对象是否仍然与树上的BuildContext关联。mounted属性是一个布尔值，如果State对象仍然与树上的BuildContext关联，它将为true，否则为false。
主要用途是在执行异步操作后，如网络请求的回调中，检查mounted属性，以确保在异步操作完成前，State对象仍然有效。这是因为在异步操作完成后，如果用户已经离开了当前页面，State对象可能已经被销毁，此时直接调用setState或其他可能引起UI更新的操作可能会导致错误。
示例：

Future<void> fetchData() async {
    // 模拟异步操作，比如网络请求
    await Future.delayed(Duration(seconds: 2));

    // 检查mounted属性，确保State对象仍然有效
    if (mounted) {
      setState(() {
        _dataLoaded = true;
      });
    }
  }