Flutter 从入门到精通（水）

第3章：Flutter 基础组件

Flutter 提供了丰富的 UI 组件，本章将介绍常用的视觉组件与布局组件，为后续页面构建打下基础。

一、常见视觉组件

1. Text（文本组件）

dart 复制代码

Text(
  'Hello Flutter',
  style: TextStyle(
    fontSize: 20,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
  ),
)

2. Image（图片组件）

本地图片：

dart 复制代码

Image.asset('assets/images/logo.png', width: 100, height: 100)

网络图片：

dart 复制代码

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

3. Icon（图标组件）

dart 复制代码

Icon(Icons.favorite, color: Colors.red, size: 30)

常用图标来自 Icons 类，无需导入资源。

4. ElevatedButton（按钮组件）

dart 复制代码

ElevatedButton(
  onPressed: () {
    print('Clicked');
  },
  child: Text('Click Me'),
)

还可以使用 TextButton、OutlinedButton 等变体。

二、常见布局组件

1. Container（容器）

dart 复制代码

Container(
  width: 200,
  height: 100,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.symmetric(vertical: 10),
  decoration: BoxDecoration(
    color: Colors.orange,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text('Inside Container'),
)

容器是常用的布局盒子，可设置尺寸、边距、背景、边框等。

2. Row 与 Column（水平/垂直布局）

dart 复制代码

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text("Left"),
    Text("Right"),
  ],
)

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text("Line 1"),
    Text("Line 2"),
  ],
)

注意：

mainAxisAlignment 是主轴对齐（横向或纵向）
crossAxisAlignment 是交叉轴对齐

3. Stack（层叠布局）

dart 复制代码

Stack(
  alignment: Alignment.center,
  children: [
    Container(width: 100, height: 100, color: Colors.blue),
    Positioned(
      top: 10,
      right: 10,
      child: Icon(Icons.star, color: Colors.white),
    ),
  ],
)

Stack 允许组件重叠显示，常用于头像叠加、卡片装饰等场景。

三、滚动组件

1. ListView（纵向列表）

dart 复制代码

ListView(
  children: List.generate(5, (index) => ListTile(title: Text('Item $index'))),
)

性能更优的 ListView.builder：

dart 复制代码

ListView.builder(
  itemCount: 1000,
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item $index'));
  },
)

2. GridView（网格布局）

dart 复制代码

GridView.count(
  crossAxisCount: 3,
  children: List.generate(6, (index) {
    return Center(child: Text('Grid $index'));
  }),
)

或使用 GridView.builder 动态构建大量网格。

四、常见问题解析

❗ 问题 1：布局溢出（overflow）

现象：页面报错 A RenderFlex overflowed...

原因分析：

Row / Column 中子组件太大
未使用 Expanded/Flexible 进行空间适配
未设置滚动

解决方案：

使用 Expanded 包裹子组件自动撑满空间
设置 overflow: TextOverflow.ellipsis 防止文字超出
对长内容使用 SingleChildScrollView 实现滚动

示例：

dart 复制代码

Expanded(
  child: Text(
    'This is a very long text...',
    overflow: TextOverflow.ellipsis,
  ),
)

❗ 问题 2：列表滚动卡顿、性能差

原因分析：

使用 ListView 构建大量组件时未懒加载
图片未缓存或重复构建 widget

解决方案：

使用 ListView.builder 代替静态 ListView
图片加载使用缓存组件 cached_network_image
避免在 build 中频繁创建新对象

示例：

dart 复制代码

ListView.builder(
  itemCount: data.length,
  itemBuilder: (context, index) => ListTile(title: Text(data[index])),
)