Flutter – 文本按钮小部件

在Flutter中，文本按钮是非常基本也很实用的小部件。它们提供了一种简单而直接的方式来实现用户界面中的常见操作。

创建文本按钮

要创建文本按钮，您可以使用RaisedButton或FlatButton小部件。这些小部件都具有相似的属性和工作方式，但不同之处是RaisedButton看起来更像一个“凸起的”按钮，而FlatButton看起来更像一个扁平的标签。

下面是一个创建RaisedButton的例子：

RaisedButton(
  child: Text('Click me!'),
  onPressed: () {
    print('Button clicked!');
  },
),

这将创建一个带有文本“Click me!”的按钮，在用户单击按钮时将打印一条消息。您可以使用onPressed属性来指定按钮被单击时要执行的代码。在本例中，我们要在控制台中打印一条消息。

同样，下面是一个示例，使用FlatButton来创建一个类似的按钮：

FlatButton(
  child: Text('Click me!'),
  onPressed: () {
    print('Button clicked!');
  },
),

改变文本按钮的样式

您可以通过指定不同的属性来更改文本按钮的样式和行为。例如，通过更改按钮文本的颜色和字体大小，您可以改变按钮的外观。

以下是一些常见的RaisedButton和FlatButton属性：

textColor

用于指定按钮文本颜色的颜色值：

RaisedButton(
  child: Text('Click me!'),
  onPressed: () {
    print('Button clicked!');
  },
  textColor: Colors.white,
),

color

指定按钮的背景色：

RaisedButton(
  child: Text('Click me!'),
  onPressed: () {
    print('Button clicked!');
  },
  color: Colors.blue,
),

padding

用于指定按钮内边距的EdgeInsets：

RaisedButton(
  child: Text('Click me!'),
  onPressed: () {
    print('Button clicked!');
  },
  padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
),

shape

用于指定按钮形状和边框的ShapeBorder：

RaisedButton(
  child: Text('Click me!'),
  onPressed: () {
    print('Button clicked!');
  },
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
    side: BorderSide(color: Colors.red, width: 2),
  ),
),

结论

文本按钮是Flutter中非常基本且实用的小部件，可以为您提供直接的方式来构建您的应用程序的用户界面。通过更改颜色、字体大小和形状等属性，您可以很容易地自定义按钮的样式。