如何在 Flutter 应用中优化 Material Design 按钮-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是谷歌推广的设计风格，搭载 Flutter 的应用的视感多采用 Material Design 风格。本文将介绍如何优化 Material Design 按钮，以达到更好的用户体验。

常见的 Material Design 按钮

在 Flutter 中，我们通常使用 RaisedButton、FlatButton、OutlineButton、IconButton 来实现 Material Design 风格的按钮。其中 RaisedButton 是最典型的 Material Design 按钮，其它三个按钮一般都会使用到。

如何优化

1. 设置主题色

在 Material Design 中，颜色是起到至关重要的作用的。默认 RaisedButton 的颜色为主题色，可以通过修改主题色实现美化按钮的目的。

RaisedButton(
  color: Theme.of(context).primaryColor, // 设置主题色
  onPressed: () {},
  child: Text('按钮'),
)

2. 修改按钮颜色

如果只想修改 RaisedButton 的颜色，可以这样：

RaisedButton(
  color: Colors.red, // 修改按钮颜色
  onPressed: () {},
  child: Text('按钮'),
)

3. 用圆角替代方形

默认 RaisedButton 的形状是方形的，可以设置圆角使它变得更美观、更柔和一些。

RaisedButton(
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(30)), // 设置圆角
  onPressed: () {},
  child: Text('按钮'),
)

4. 添加阴影

阴影效果能够让按钮看起来更加凸显，可以通过 elevation 属性添加阴影效果。

RaisedButton(
  elevation: 8, // 添加阴影效果
  onPressed: () {},
  child: Text('按钮'),
)

5. 按钮大小

在某些情况下，我们需要改变按钮的大小，通常使用将 Button 包在 SizedBox 中或是将 Button 包裹在 ConstrainedBox 里，然后设置宽高大小即可。

SizedBox(
  width: 200,
  height: 50,
  child: RaisedButton(
    onPressed: () {},
    child: Text('按钮'),
  ),
)

或者

ConstrainedBox(
  constraints: BoxConstraints.tightFor(width: 200, height: 50),
  child: RaisedButton(
    onPressed: () {},
    child: Text('按钮'),
  ),
)

总结

通过以上方法可以轻松美化 Material Design 按钮，在实际开发过程中可以根据场景选择使用不同的优化方案，加强用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64a6c83348841e989436ba3e