Flutter速来系列5: Flutter的组件之Text、Button

J船长
1,157 阅读7分钟

一、Text组件

Text是Flutter中用于显示文本的基本组件之一。它提供了许多属性来自定义文本的外观和行为。下面是Text组件的属性列表及其描述：

Text属性

  1. text: 要显示的文本内容。

  2. key: 用于识别组件的唯一键。

  3. style: TextStyle对象，用于指定文本的样式，例如字体、颜色、大小等。常用属性如下：

    • color: 文本颜色。
    • fontSize: 字体大小。
    • fontWeight: 字体粗细。
    • fontStyle: 字体样式，如斜体。
    • letterSpacing: 字母间距。
    • wordSpacing: 单词间距。
    • background: 文本背景颜色。
    • decoration: 文本修饰，如下划线、删除线等。
    • decorationColor: 文本修饰的颜色。
    • decorationStyle: 文本修饰的样式。
    • height: 行高。
    • textBaseline: 基线对齐方式。
    • shadows: 文本阴影效果。

  4. textAlign: 文本对齐方式，可以是左对齐（left）、右对齐（right）、居中对齐（center）或两端对齐（justify）。

  5. textDirection: 文本方向，可以是从左到右（ltr）或从右到左（rtl）。

  6. softWrap: 是否自动换行，默认为true。

  7. overflow: 文本溢出处理方式，可以是省略号（ellipsis）、截断（clip）或折叠（fade）。

  8. maxLines: 最大显示行数，超过部分将根据overflow属性进行处理。

  9. textScaleFactor: 文本缩放因子，用于调整文本大小的比例。

  10. locale: 文本的本地化配置，用于支持多语言显示。

  11. strutStyle: 文本行高样式。

  12. textWidthBasis: 文本宽度计算基准，可以是parent（父容器宽度）或 longestLine（最长行宽度）。

  13. textHeightBehavior: 文本高度行为配置。

示例代码

下面是一些常见属性的示例代码：

示例1：基本用法

Text(
  'Hello, Flutter!', // 要显示的文本内容
  style: TextStyle(
    fontSize: 16.0,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
  textAlign: TextAlign.center, // 居中对齐
)

image.png

示例2：自动换行与溢出处理

Text(
  'This is a long text that will be automatically wrapped if it exceeds the available width of the container. If the text still does not fit, it will be truncated with an ellipsis.',
  softWrap: true, // 自动换行
  overflow: TextOverflow.ellipsis, // 溢出处理方式为省略号
)

image.png

示例3：多行文本

Text(
  'This is a long text that will be displayed on multiple lines. The maximum number of lines to display is limited to 2.',
  maxLines: 2, // 最大显示行数为2
)

image.png

示例4、style的多个属性

当需要结合多个TextStyle属性时，可以将它们组合到一个TextStyle对象中，并将该对象传递给style属性。下面是一个示例代码，演示了如何结合多个TextStyle属性：

Text(
  'Hello, Flutter!',
  style: TextStyle(
    color: Colors.blue, // 设置文本颜色为蓝色
    fontSize: 20.0, // 设置字体大小为20.0
    fontWeight: FontWeight.bold, // 设置字体粗细为粗体
    fontStyle: FontStyle.italic, // 设置字体样式为斜体
    letterSpacing: 2.0, // 设置字母间距为2.0
    wordSpacing: 5.0, // 设置单词间距为5.0
    decoration: TextDecoration.underline, // 设置下划线
    decorationColor: Colors.red, // 设置下划线颜色为红色
    decorationStyle: TextDecorationStyle.dotted, // 设置下划线样式为点状
    height: 1.5, // 设置行高为1.5倍字体大小

    textBaseline: TextBaseline.alphabetic, // 设置基线对齐方式为字母基线
    shadows: [
      Shadow(
        color: Colors.black, // 设置阴影颜色为黑色
        offset: Offset(2.0, 2.0), // 设置阴影偏移量
        blurRadius: 3.0, // 设置阴影模糊半径
      ),
    ],
  ),
)

在上述代码中，将多个TextStyle属性组合到了一个TextStyle对象中，并将该对象传递给了style属性。

image.png

注意点

在日常开发中，使用Text组件时需要注意以下几点：

  • 尽量使用常量文本：在构建Text组件时，如果文本内容是固定的，建议将文本内容定义为常量，以避免在每次重建时都重新创建文本对象。
  • 避免过多的样式嵌套：过多的TextStyle嵌套可能会导致性能下降，因此应尽量减少嵌套的层次。
  • 注意文本溢出处理：根据实际需求选择合适的文本溢出处理方式，以保证文本的可读性和用户体验。
  • 使用字体图标：如果需要显示特殊图标或符号，可以考虑使用字体图标（如Flutter中的Icon）代替纯文本，并根据需要进行样式设置。

高级特性：

  • 富文本支持：Flutter的Text组件支持富文本，可以使用RichText组合多个TextSpan以实现复杂的文本样式效果。
  • 本地化支持：可以使用Text组件的locale属性来支持多语言文本的显示，配合Flutter的国际化库可以实现应用的多语言支持。

二、Button

Button是Flutter中用于创建交互按钮的组件。根据具体的设计需求和风格，Flutter提供了多个不同类型的按钮组件，常见的按钮组件如下：

Button的分类

  1. ElevatedButton: 凸起按钮，具有立体效果。
  2. TextButton: 文本按钮，通常用于文字链接或简单的按钮。
  3. OutlinedButton: 带边框的按钮，边框颜色可自定义。
  4. IconButton: 图标按钮，使用图标作为按钮的内容。

image.png

button的属性

下面是常用按钮属性的详细列表及其描述：

  1. onPressed: 点击按钮时触发的回调函数。【常用】

  2. onLongPress: 长按按钮时触发的回调函数。

  3. style: ButtonStyle对象，用于设置按钮的样式。常用属性如下：

    • backgroundColor：按钮的背景颜色。【常用】
    • foregroundColor：按钮的前景颜色，如文字颜色。【常用】
    • elevation：按钮的海拔高度，用于创建立体效果。
    • padding：按钮的内边距。【常用】
    • side：按钮的边框样式。
    • shape：按钮的形状。【常用】
    • minimumSize：按钮的最小尺寸。
    • alignment：按钮内容的对齐方式。

  4. child: 按钮的子组件，通常是一个Text或Icon等用于显示按钮内容的组件。【常用】

  5. onHighlightChanged: 当按钮被按下或释放时触发的回调函数。

  6. focusNode: 控制按钮的焦点状态。

  7. autofocus: 是否自动获取焦点。

  8. clipBehavior: 内容溢出时的裁剪行为。

  9. enableFeedback: 是否为按钮点击提供音频和触觉反馈。

示例代码

下面是一些常见按钮属性的示例代码：

示例1：ElevatedButton的基本用法

ElevatedButton(
  onPressed: () {
    // 按钮点击事件处理逻辑
  },
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue), // 设置按钮背景颜色为蓝色
    foregroundColor: MaterialStateProperty.all(Colors.white), // 设置按钮前景颜色为白色
  ),
  child: Text('Submit'), // 按钮显示的文本
)

image.png

示例2：TextButton的基本用法

TextButton(
  onPressed: () {
    // 按钮点击事件处理逻辑
  },
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.all(Colors.blue), // 设置按钮前景颜色为蓝色
  ),
  child: Text('Click Here'), // 按钮显示的文本
)

image.png

image.png

示例3：OutlinedButton的基本用法

OutlinedButton(
  onPressed: () {
    // 按钮点击事件处理逻辑
  },
  style: ButtonStyle(
    side: MaterialStateProperty.all(BorderSide(color: Colors.blue)), // 设置按钮边框样式为蓝色边框
    foregroundColor: MaterialStateProperty.all(Colors.blue), // 设置按钮前景颜色为蓝色
  ),
  child: Text('Submit'), // 按钮显示的文本
)

image.png

示例4：IconButton的基本用法

IconButton(
  onPressed: () {
    // 按钮点击事件处理逻辑
  },
  icon: Icon(Icons.add), // 按钮中的图标
)

image.png

4种按钮结合在一起
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Button Comparison',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Button Comparison'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 按钮点击事件处理逻辑
                print('ElevatedButton pressed');
              },
              style: ElevatedButton.styleFrom(
                primary: Colors.blue, // 设置按钮背景颜色为蓝色
                onPrimary: Colors.white, // 设置按钮前景颜色为白色
              ),
              child: Text('ElevatedButton'), // 按钮显示的文本
            ),
            SizedBox(height: 16),
            TextButton(
              onPressed: () {
                // 按钮点击事件处理逻辑
                print('TextButton pressed');
              },
              style: TextButton.styleFrom(
                primary: Colors.blue, // 设置按钮前景颜色为蓝色
              ),
              child: Text('TextButton'), // 按钮显示的文本
            ),
            SizedBox(height: 16),
            OutlinedButton(
              onPressed: () {
                // 按钮点击事件处理逻辑
                print('OutlinedButton pressed');
              },
              style: OutlinedButton.styleFrom(
                side: BorderSide(color: Colors.blue), // 设置按钮边框样式为蓝色边框
                primary: Colors.blue, // 设置按钮前景颜色为蓝色
              ),
              child: Text('OutlinedButton'), // 按钮显示的文本
            ),
            SizedBox(height: 16),
            IconButton(
              onPressed: () {
                // 按钮点击事件处理逻辑
                print('IconButton pressed');
              },
              icon: Icon(Icons.add), // 按钮中的图标
            ),
          ],
        ),
      ),
    );
  }
}

注意点

在日常开发中，使用按钮组件时需要注意以下几点：

  • 根据设计风格选择合适的按钮类型：根据设计需求，选择合适的按钮类型，如凸起按钮、文本按钮或带边框的按钮。
  • 设置按钮的点击事件回调函数：通过onPressed属性设置按钮的点击事件处理逻辑。
  • 自定义按钮样式：使用ButtonStyle属性来自定义按钮的样式，如背景颜色、前景颜色、形状等。
  • 按钮的内容组件：通过child属性设置按钮的显示内容，可以是文本、图标或其他组件。
  • 注意按钮的交互反馈：根据需要，可以设置按钮的长按事件、音频和触觉反馈等属性。

高级特性：

  • 自定义按钮形状：通过shape属性可以自定义按钮的形状，如圆角按钮、圆形按钮等。
  • 动态按钮样式：使用ButtonStyle中的动态属性（如MaterialStateProperty）可以实现根据按钮状态变化而改变按钮样式的效果。
avatar
文章
阅读
粉丝