Flutter 中常用的组件

一、什么是widget？

在 Flutter 中，Widget 是构建用户界面的基本元素。简单地说，Widget 是一个描述界面组件外观和行为的对象。Flutter 应用程序的整个用户界面都是由多个嵌套的 Widget 组成的树状结构，这个树状结构被称为 Widget 树。

Flutter 中的 Widget 可以分为两种类型：

1. StatelessWidget: 无状态的 Widget，它们是不可变的，意味着一旦创建就不会发生变化。StatelessWidget 通常用于描述静态界面组件，它们的外观和行为在整个生命周期中保持不变。例如，一个静态的文本标签或图标就可以用 StatelessWidget 来表示。
2. StatefulWidget: 有状态的 Widget，它们是可变的，可以根据应用程序的状态和用户交互来动态更新。StatefulWidget 通常用于描述需要响应用户操作或数据变化的界面组件。StatefulWidget 包含两个类：一个是 StatefulWidget 本身，另一个是 State 类，用于保存 Widget 的状态信息。StatefulWidget 通过调用 setState() 方法来通知 Flutter 框架更新界面。

在理解 Flutter 中的 Widget 时，可以将其视为构建用户界面的基本构件。Widget 是用于描述用户界面的一种抽象，它可以代表一个简单的元素（例如文本、按钮）或者是一个更复杂的组合元素（例如列表、网格布局）。

【总结：万物皆是Widget。】

以下是理解 Flutter Widget 的一些重要概念：

1. 组件树（Widget Tree）：在 Flutter 中，所有的用户界面都是由 Widget 组成的树状结构，称为组件树。这个树的根是 MaterialApp 或者 WidgetsApp，而其他的 Widget 则是它的子节点，形成了一个嵌套的结构。每个 Widget 都可以有零个或多个子节点，这样就构成了整个应用程序的界面结构。
2. 无状态和有状态 Widget：在 Flutter 中，Widget 分为无状态 (StatelessWidget) 和有状态 (StatefulWidget) 两种类型。无状态 Widget 是指其属性一旦确定，就不会再发生变化的 Widget，而有状态 Widget 是指其属性可能会随时间变化而变化的 Widget。有状态 Widget 通常会包含一个 State 对象，用于维护其状态并响应用户交互。
3. 构建和重建（Build and Rebuild）：Widget 的核心工作是构建其对应的界面。当 Widget 第一次被创建或者需要更新时，Flutter 会调用其 build() 方法来构建界面。这个方法会返回一个 Widget 树，用于描述界面的外观。当 Widget 的属性发生变化时，或者父级 Widget 要求重新构建时，Flutter 会重新调用 build() 方法来更新界面。
4. Material Design 和 Cupertino 风格：Flutter 提供了两种主题风格，分别是 Material Design 和 Cupertino。Material Design 是 Google 设计的一种现代风格，它基于纸张的观感和真实的阴影来创造出一种真实的物理效果。而 Cupertino 风格则是仿照了苹果的设计风格，采用了更加扁平化和简洁的外观。
5. Widget 组合和自定义：Flutter 提供了丰富的内置 Widget，用于构建各种常见的用户界面元素。除了内置的 Widget 外，Flutter 还允许开发者通过组合现有的 Widget 或者自定义新的 Widget 来构建复杂的界面。这种灵活性使得开发者可以根据需要创建出适合自己应用的界面元素。

二、Flutter 中常用的组件分类

Flutter 中常用的组件种类繁多，可以根据功能和外观特点进行分类。

1文本和样式：

• • Text：用于显示文本。
  • RichText：支持富文本样式的文本显示组件。
  • TextStyle：用于定义文本样式。
  • Container：一个多功能的组件，可以用来包裹其他组件，并且可以设置背景、边框、内边距等样式。

2布局：

• • Row：水平排列其子组件。
  • Column：垂直排列其子组件。
  • Stack：将子组件叠加在一起。
  • Positioned：在 Stack 中定位子组件的位置。
  • Flex：弹性布局，用于在 Row 或 Column 中设置子组件的弹性因子。
  • Expanded：用于将子组件填充父容器的剩余空间。

3输入控件：

• • TextField：用于接收用户输入的文本框。
  • TextFormField：更加强大的文本输入框，支持表单验证和错误提示。
  • IconButton：带有图标的按钮。
  • Checkbox、Radio、Switch：选择框组件。

4列表：

• • ListView：滚动列表组件。
  • ListTile：列表项组件，通常用于 ListView 中。
  • GridView：网格布局列表组件。
  • SliverList、SliverGrid：支持自定义滚动效果的列表组件。

5图片和图标：

• • Image：用于显示图片。
  • ImageIcon：用于显示图标。
  • Icon：一个图标组件，用于显示 Material Design 风格的图标。

6导航：

• • MaterialApp、MaterialPageRoute：用于应用程序的根组件和页面导航。
  • Navigator：页面导航管理组件。
  • Drawer、AppBar：侧边栏和应用栏组件。

7动画：

• • AnimatedContainer、AnimatedOpacity、AnimatedPadding：带有动画效果的容器组件。
  • Hero：用于实现页面间共享元素动画的组件。
  • Tween、TweenAnimationBuilder：用于创建动画插值的工具类和动画构建器。

8状态管理：

• • StatefulWidget、StatelessWidget：用于管理组件状态的基本类。
  • setState：用于更新 State 对象的状态并重新构建界面。
  • Provider、Bloc、GetX：常用的状态管理库。

9其他常用组件：

• • SingleChildScrollView、ListView.builder、GridView.builder：用于构建长列表的优化方案。
  • AspectRatio：用于设置子组件的宽高比。
  • AlertDialog、SimpleDialog、BottomSheet：用于显示对话框和底部弹出窗口。