Flutter 小部件介绍

在 Flutter 中，小部件是视图的基本构建块。小部件是不可变的，当状态发生改变时，Flutter 会创建新的小部件树来更新视图。

文本（Text）

用于显示简单的文本。

Text(
  'Hello, world!',
  style: TextStyle(fontSize: 20),
),

图片（Image）

用于显示本地或网络上的图像。

Image.network(
  'https://picsum.photos/250?image=9',
),

按钮（Button）

用于触发操作的小部件。

ElevatedButton(
  onPressed: () {
    print('Hello, world!');
  },
  child: Text('Press me!'),
),

输入（Input）

用于获取用户输入的小部件。

TextField(
  decoration: InputDecoration(
    hintText: 'Enter your name',
  ),
  onChanged: (value) {
    print('The user entered $value');
  },
),

列表（List）

用于显示一组具有相似结构的信息。

ListView(
  children: [
    ListTile(
      leading: Icon(Icons.person),
      title: Text('John Doe'),
      subtitle: Text('Software Developer'),
    ),
    ListTile(
      leading: Icon(Icons.person),
      title: Text('Jane Doe'),
      subtitle: Text('Project Manager'),
    ),
  ],
),

布局（Layout）

用于控制小部件的位置和大小。

Center(
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
),

总结

这里只列举了一些常见的小部件，Flutter 还有许多其他的小部件用于构建复杂的视图。因为小部件是不可变的，所以它们非常高效。掌握小部件的使用是 Flutter 开发的基础。