Flutter的FlatButton小部件

在Flutter开发中，Flutter的FlatButton小部件可以实现一个平面的按钮，其按下后会有水波纹效果。

基本用法

FlatButton有很多参数，其中必须要传入的是onPressed回调函数。此回调函数会在按钮按下时被调用。FlatButton的child参数用于设置按钮上的文本或图标。

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

按钮样式

FlatButton的textColor属性用于设置按钮文本颜色，color属性用于设置按钮的背景色。如果设置textColor和color的颜色不一致，则按钮的文本颜色会覆盖背景色。 另外，disabledTextColor属性用于设置按钮在不可用状态时文本颜色。如果不设置，则会使用当前主题对应状态的默认颜色。

FlatButton(
  onPressed: () {},
  textColor: Colors.white,
  color: Colors.blue, // 按钮背景颜色
  child: Text('Click me!'),
),

按钮形状

那么问题来了，如果需要一个打洞或圆角的背景按钮应该怎么办呢？只需要设置shape属性即可。

例如，设置一个打洞的圆形按钮

FlatButton(
  onPressed: () {},
  textColor: Colors.white,
  color: Colors.blue,
  child: Text('Click me!'),
  shape: CircleBorder(
      side: BorderSide(
        color: Colors.white,
        width: 2,
      ),
    ),
),

再例如，设置一个圆角按钮

FlatButton(
  onPressed: () {},
  textColor: Colors.white,
  color: Colors.blue,
  child: Text('Click me!'),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(25),
    side: BorderSide(
      color: Colors.white,
      width: 2,
    ),
  ),
),

按钮图标

有时候，我们需要一个图标按钮，只需要在child属性上传入一个Icon小部件即可。如果想自定义图标的颜色和大小，可以通过icon属性来设置。

FlatButton.icon(
  onPressed: () {},
  icon: Icon(Icons.thumb_up, color: Colors.white, size: 30),
  label: Text('Like', style: TextStyle(color: Colors.white)),
  color: Colors.blue,
),

按钮状态

设置按钮的状态非常简单，在FlatButton上添加一个enabled属性即可。如果为true，则按钮可以按下，否则按钮将变为不可用状态。

FlatButton(
  onPressed: () {},
  textColor: Colors.white,
  color: Colors.blue,
  child: Text('Click me!'),
  enabled: false, // 不可用状态
),

总结

以上是FlatButton的介绍，它是Flutter中一个非常实用的小部件，可以让我们轻松实现各种样式的按钮。通过熟练的掌握和运用，可以极大地提高我们的开发效率和用户体验。