Flutter常用Widget详解（一）

最新推荐文章于 2025-04-16 15:15:43 发布

Flutter编程指南

最新推荐文章于 2025-04-16 15:15:43 发布

阅读量1k

点赞数

分类专栏： Flutter 文章标签： Flutter APP Widget 跨平台技术应用开发

本文链接：https://blog.youkuaiyun.com/weixin_43499085/article/details/88842337

版权

本文是Flutter实战篇，介绍了常见的Widget，包括文本控件Text和RichText，图片控件Image和Icon，按钮控件RaisedButton和CupertinoButton，输入控件TextField和CupertinoTextField，以及选择控件如Checkbox、Radio、Switch、Slider等，帮助开发者理解和使用这些基本组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

前几篇文章大家已经对Flutter环境搭建、所用开发语言和一些绘图原理有了一个初步了解，本篇是一个实战篇，进行应用开发时首先要进行UI界面的开发，Flutter所展示的UI界面都是由一些Widget组合而成，Widget可以理解为我们原生开发中的UI控件和UI布局控件。例如iOS中的UILabel、UIButton、UITableView，安卓中的Button、TextView、ListView等。下面带大家一起来看一下常用的Widget使用方法。

常用Widget介绍

文本控件

文本控件是日常开发中最常用的控件，Flutter提供了两个文本控件供我们使用，下面针对常用的几个属性进行介绍。

Text

Text(
  'Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.',
  textAlign: TextAlign.center, // 文本对齐方式
),
Text(
  'Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.',
  softWrap: false, // true时会自动换行处理；false时会判定为有无限的水平空间，不会换行
),
Text(
  'Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.',
  maxLines: 1, //最大行数
  style: TextStyle(
    color: Colors.blue,
  ),
),
Text(
  'Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.',
  overflow: TextOverflow.ellipsis, //溢出处理，这里ellipsis将多余的内容设置为...
),
Text(
  'Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.',
  style: TextStyle( // 文本样式
    color: Colors.red, // 文本颜色
    fontSize: 14, // 字体大小
    fontWeight: FontWeight.w600, // 字体粗细程度
    fontStyle: FontStyle.normal, // 字体样式
    letterSpacing: 2, // 字母或字间距
    wordSpacing: 5, // 单词间距
    height: 2, // 行高，值为字体大小的倍数
    shadows: [Shadow(color: Colors.red, offset: Offset(1, 1), blurRadius: 5)], // 阴影
  ),
),
Text(
  'Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.',
  style: TextStyle(
    decoration: TextDecoration.underline, // 文本装饰，此处设置下划线
    decorationColor: Colors.blue, // 文本装饰颜色
    decorationStyle: TextDecorationStyle.dotted, // 文本装饰样式
  ),
),

显示效果如下图：

RichText

富文本控件，可以对一段连续的文本设置不用的样式，实战中比较常见。

RichText(
  text: TextSpan(
    text: 'Flutter',
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: ' allows you',
        style: TextStyle(
          color: Colors.green,
          decoration: TextDecoration.underline,
          decorationStyle: TextDecorationStyle.solid,
        ),
      ),
      TextSpan(
        text: ' to build beautiful native apps',
        style: TextStyle(
          fontSize: 18,
        )
      ),
      TextSpan(
        text: ' on iOS and Android',
        style: TextStyle(
          fontWeight: FontWeight.bold,
        )
      ),
      TextSpan(
          text: ' from a single codebase.',
          style: TextStyle(
            shadows: [Shadow(color: Colors.black38, offset: Offset(3, 3))],
          )
      ),
    ],
  ),
)

显示效果如下图：