Flutter 常用组件

拥有极佳的效率与高效的执行力是衡量软件好坏的基本指标，而一个精简的程序文件会占据更少的储存空间，进而提升加载速度。Flutter 通过减少文件资源与高层次的抽象，给予使用者更低的开发门槛。

通常在Flutter 程序中，我们需要一个应用的入口文件。我们可使用 MaterialApp 提供的内容作为初始的脚手架代码，它为我们预设了导航、路由与主题等基础设定。

1. 文本（Text）组件

作为 Flutter 最基本的内容组件之一，文本（Text）是 Flutter 中最基础的元素之一。其属性十分丰富，包括文本对齐方式 textAlign、文本样式 style、文本方向 direction 等。值得注意的是，文本对齐方式 textAlign 属性不针对文本组件本身，而是相对其父组件而言。

以下为文本（Text）组件的使用实例：

Text(
  'Hello World!',
  textAlign: TextAlign.center,
  style: TextStyle(color: Colors.red, fontSize: 30),
)

2. 图片（Image）组件

Flutter 中的图片组件（Image）可以加载网络图片或本地图片。我们只需要指定图片的路径即可。

以下为图片（Image）组件的使用实例：

Image.network(
  'https://flutter.dev/images/flutter-logo-wide.png',
)

3. 按钮（Button）组件

Flutter 中的按钮（Button）组件也是常用的组件之一。它可以响应用户的点击事件，并执行相应的操作。

以下为按钮（Button）组件的使用实例：

ElevatedButton(
  onPressed: () {},
  child: Text('Click Me!'),
)

4. 输入框（TextField）组件

输入框（TextField）组件允许用户输入文本。我们可以在其中设置提示文本、边框样式等属性。

以下为输入框（TextField）组件的使用实例：

TextField(
  decoration: InputDecoration(
    hintText: 'Enter your name',
    border: OutlineInputBorder(),
  ),
)

5. 列表（ListView）组件

列表（ListView）组件可以显示一列项，通常垂直排列。列表中的每个项可以是任何类型的组件。

以下为列表（ListView）组件的使用实例：

ListView(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

6. 网格（GridView）组件

网格（GridView）组件可以显示一组项，通常是网格状排列。网格中的每个项可以是任何类型的组件。

以下为网格（GridView）组件的使用实例：

GridView.count(
  crossAxisCount: 2,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
    Text('Item 4'),
  ],
)

7. 底部导航栏（BottomNavigationBar）组件

底部导航栏（BottomNavigationBar）组件位于应用的底部，通常用于在多个页面之间导航。

以下为底部导航栏（BottomNavigationBar）组件的使用实例：

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: 'Settings',
    ),
  ],
)

8. 浮动操作按钮（FloatingActionButton）组件

浮动操作按钮（FloatingActionButton）组件是一个圆形的按钮，通常用于执行主要操作。

以下为浮动操作按钮（FloatingActionButton）组件的使用实例：

FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
)

9. 滑动删除（Dismissible）组件

滑动删除（Dismissible）组件允许用户通过滑动来删除一项。

以下为滑动删除（Dismissible）组件的使用实例：

Dismissible(
  key: Key('item-1'),
  child: Text('Item 1'),
  onDismissed: (direction) {
    // 删除项
  },
)

10. 对话框（Dialog）组件

对话框（Dialog）组件用于显示模态对话框。模态对话框会阻止用户与应用的其他部分交互，直到对话框被关闭。

以下为对话框（Dialog）组件的使用实例：

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text('Alert'),
      content: Text('This is an alert dialog'),
      actions: [
        TextButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('OK'),
        ),
      ],
    );
  },
);