12 | 经典控件（一）：文本、图片和按钮在Flutter中怎么用？-Flutter核心技术与实战

当前位置:　首页>> 技术小册>> Flutter核心技术与实战

### 章节 12 | 经典控件（一）：文本、图片和按钮在Flutter中怎么用？

在Flutter这一强大且灵活的UI框架中，构建用户界面离不开各种基础控件的灵活运用。本章将深入讲解Flutter中最为基础且使用频率极高的三种经典控件：文本（Text）、图片（Image）和按钮（Button），通过实例演示它们的基本用法、高级配置以及在实际项目中的应用场景。

#### 12.1 文本控件（Text）

文本是用户界面中最基本也是最重要的元素之一，用于展示信息给用户。在Flutter中，`Text`控件负责显示文本内容，支持丰富的样式设置，如字体大小、颜色、字重、行间距等。

##### 12.1.1 基本用法

`Text`控件的基本用法非常简单，只需要将其包裹在`Text`组件中，并指定`data`属性为要显示的文本内容即可。

```dart
Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 20.0, // 设置字体大小
    color: Colors.blue, // 设置字体颜色
    fontWeight: FontWeight.bold, // 设置字体加粗
  ),
)
```

##### 12.1.2 文本样式（TextStyle）

`TextStyle`类提供了丰富的属性来自定义文本的外观，包括但不限于：

- `fontSize`：字体大小。
- `color`：字体颜色。
- `fontWeight`：字体粗细，可选值如`FontWeight.normal`、`FontWeight.bold`等。
- `fontStyle`：字体风格，如`FontStyle.italic`表示斜体。
- `letterSpacing`：字符间距。
- `textDecoration`：文本装饰，如`TextDecoration.underline`表示下划线。
- `textAlign`：文本对齐方式，如`TextAlign.center`表示居中对齐。

##### 12.1.3 文本溢出处理

当文本内容超出容器边界时，可以使用`overflow`属性控制文本的显示方式，如截断（`TextOverflow.ellipsis`）或裁剪（`TextOverflow.clip`）。

```dart
Text(
  '这是一个非常长的文本，可能会超出容器边界。',
  maxLines: 1, // 限制最多显示1行
  overflow: TextOverflow.ellipsis, // 超出部分显示省略号
)
```

#### 12.2 图片控件（Image）

图片是提升用户界面吸引力的重要手段之一。Flutter中的`Image`控件支持从多种来源加载图片，包括网络、资源文件（Assets）和内存。

##### 12.2.1 基本用法

加载图片资源的基本方式是通过`Image.asset`和`Image.network`。

- 从资源文件加载：

```dart
Image.asset(
  'assets/images/logo.png', // 图片资源路径
  width: 200, // 设置图片宽度
  height: 200, // 设置图片高度
  fit: BoxFit.cover, // 图片填充方式
)
```

- 从网络加载：

```dart
Image.network(
  'https://example.com/image.jpg', // 图片URL
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
    // 加载过程中的自定义UI
    if (loadingProgress == null) return child;
    return CircularProgressIndicator(); // 显示加载进度指示器
  },
  errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
    // 加载失败时的自定义UI
    return Icon(Icons.error_outline);
  },
)
```

##### 12.2.2 图片填充模式（BoxFit）

`fit`属性决定了图片如何适应其容器的大小。常见的`BoxFit`值包括：

- `BoxFit.contain`：保持图片的宽高比，缩放以适应容器，但图片可能会小于容器大小。
- `BoxFit.cover`：缩放图片以完全覆盖容器，但图片的宽高比可能会改变。
- `BoxFit.fill`：拉伸图片以完全填充容器，不保持宽高比。
- `BoxFit.fitWidth`：缩放图片的宽度以匹配容器宽度，高度按比例缩放。
- `BoxFit.fitHeight`：缩放图片的高度以匹配容器高度，宽度按比例缩放。

#### 12.3 按钮控件（Button）

按钮是用户与应用程序交互的重要组件，用于触发特定动作或事件。Flutter提供了多种按钮实现，包括`FlatButton`、`RaisedButton`（已废弃，推荐使用`ElevatedButton`）、`OutlineButton`（已废弃，推荐使用`OutlinedButton`）、`IconButton`和`TextButton`等。

##### 12.3.1 TextButton

`TextButton`是一种轻量级的按钮，主要用于文本点击事件，其外观更加简洁。

```dart
TextButton(
  onPressed: () {
    // 按钮点击时的处理逻辑
    print('TextButton clicked');
  },
  child: Text('点击我'),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith((states) {
      if (states.contains(MaterialState.pressed)) {
        return Colors.blue.withOpacity(0.5);
      }
      return Colors.transparent;
    }),
    foregroundColor: MaterialStateProperty.resolveWith((states) {
      return Colors.blue;
    }),
  ),
)
```

##### 12.3.2 ElevatedButton

`ElevatedButton`是一个带有阴影和高亮效果的按钮，适用于需要突出显示的操作。

```dart
ElevatedButton(
  onPressed: () {
    // 按钮点击时的处理逻辑
    print('ElevatedButton clicked');
  },
  child: Text('确认'),
  style: ElevatedButton.styleFrom(
    primary: Colors.green, // 按钮颜色
    onPrimary: Colors.white, // 文本颜色
    elevation: 4.0, // 阴影高度
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0), // 按钮边角圆滑度
    ),
  ),
)
```

##### 12.3.3 IconButton

`IconButton`是一个仅包含图标的按钮，常用于工具栏或导航栏中的操作。

```dart
IconButton(
  icon: Icon(Icons.add), // 图标
  onPressed: () {
    // 按钮点击时的处理逻辑
    print('IconButton clicked');
  },
  color: Colors.red, // 图标颜色
)
```

#### 总结

本章详细介绍了Flutter中三种经典控件：文本（Text）、图片（Image）和按钮（Button）的基本用法和高级配置。通过掌握这些基础控件，你可以开始构建功能丰富、界面美观的Flutter应用程序。在实际开发中，灵活运用这些控件，结合Flutter提供的布局系统（如`Row`、`Column`、`Stack`等），可以实现复杂且响应用户操作的界面。此外，随着Flutter的不断更新，新的控件和特性也将不断出现，持续关注Flutter官方文档和社区动态，将有助于你保持技术的前沿性。