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

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

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

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

12.1 文本控件（Text）

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

12.1.1 基本用法

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

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）。

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

12.2 图片控件（Image）

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

12.2.1 基本用法

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

从资源文件加载：

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

从网络加载：

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是一种轻量级的按钮，主要用于文本点击事件，其外观更加简洁。

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是一个带有阴影和高亮效果的按钮，适用于需要突出显示的操作。

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是一个仅包含图标的按钮，常用于工具栏或导航栏中的操作。

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

总结

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