Flutter 布局控件完结篇

在Flutter中，有多种布局控件可以用来构建界面。以下是一些常用的布局控件及其简单示例：

1. Row和Column：这是最基本的布局控件，用于水平或垂直排列子控件。

Row(
  children: <Widget>[
    Text('Hello'),
    Text('World'),
  ],
)

2. Stack：可以重叠的布局，类似CSS中的position: absolute。

Stack(
  children: <Widget>[
    CircleAvatar(
      backgroundImage: NetworkImage('https://example.com/image.png'),
    ),
    Positioned(
      child: CircleAvatar(
        backgroundColor: Colors.red,
        child: Text('A'),
      ),
      right: 10.0,
      bottom: 10.0,
    ),
  ],
)

3. ListView：用于创建滚动列表。

ListView(
  children: <Widget>[
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    // ...
  ],
)

4. GridView：用于创建网格布局。

GridView.count(
  crossAxisCount: 3,
  children: <Widget>[
    GridTile(child: Image.network('https://example.com/image1.png')),
    GridTile(child: Image.network('https://example.com/image2.png')),
    // ...
  ],
)

5. Wrap：流布局，当空间不足时，子控件会移动到新行或新列。

Wrap(
  spacing: 4.0,
  runSpacing: 4.0,
  children: <Widget>[
    Chip(label: Text('Chip 1')),
    Chip(label: Text('Chip 2')),
    // ...
  ],
)

6. Card：创建卡片式布局。

Card(
  child: Column(
    children: <Widget>[
      ListTile(
        title: Text('Card Title'),
      ),
      Divider(), // 分割线
      ListTile(
        title: Text('Card Subtitle'),
      ),
    ],
  ),
)

这些是在Flutter中构建布局时可能会用到的一些常用控件。每个控件都有自己的特点和用法，可以根据实际需求选择合适的控件进行使用。