如何在 Flutter 中设置文本按钮的样式 - Dart

Flutter 中的文本按钮是一种常见的控件，它可以以文本的形式呈现一个点击区域，用于实现各种功能。本文将介绍如何通过代码设置文本按钮的样式。

创建文本按钮

在 Flutter 中，可以通过 TextButton 控件创建一个文本按钮。下面是创建一个简单的文本按钮的代码：

TextButton(
  onPressed: () {},
  child: Text('Click me'),
)

这个代码会创建一个纯白色背景、黑色文本、无边框的文本按钮。

设置文本按钮的样式

设置背景色

要设置文本按钮的背景色，可以使用 style 属性的 backgroundColor 属性。下面是一个设置了红色背景色的代码示例：

TextButton(
  onPressed: () {},
  child: Text('Click me'),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
  ),
)

设置文本样式

要设置文本按钮的文本样式，可以使用 style 属性的 foregroundColor 和 textStyle 属性。下面是一个设置了蓝色文本和 bold 字体的代码示例：

TextButton(
  onPressed: () {},
  child: Text('Click me'),
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
    textStyle: MaterialStateProperty.all<TextStyle>(
      TextStyle(fontWeight: FontWeight.bold),
    ),
  ),
)

设置边框样式

要设置文本按钮的边框样式，可以使用 style 属性的 side 属性。下面是一个设置了边框样式的代码示例：

TextButton(
  onPressed: () {},
  child: Text('Click me'),
  style: ButtonStyle(
    side: MaterialStateProperty.all<BorderSide>(
      BorderSide(color: Colors.blue),
    ),
  ),
)

设置圆角样式

要设置文本按钮的圆角样式，可以使用 style 属性的 shape 属性。下面是一个设置了圆角样式的代码示例：

TextButton(
  onPressed: () {},
  child: Text('Click me'),
  style: ButtonStyle(
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
      ),
    ),
  ),
)

总结

通过使用 TextButton 控件的 style 属性，可以灵活地设置文本按钮的样式，包括背景色、文本样式、边框样式和圆角样式等。