flutter - 在 Flutter 中覆盖小部件样式

Question

问题:我如何自动(如果可能)设置所有 RaisedButton 的样式以某种方式在我的应用程序中添加小部件？

---

我正在将应用程序从原生 Android 转换为 Flutter。在此应用程序中，所有主要操作按钮都是圆形的、灰色的，并带有白色边框。在 Android 中，这就像在 styles.xml 中定义样式一样简单。和设置 <Button style="MyPrimaryButton"/> .

另一方面，在 Flutter 中，我只能找到使用 property: Theme.of(context).property 设置单个属性的示例(包括来自 theming docs 的示例)而且似乎没有办法传递颜色和字体以外的样式属性。

以下是我想用于所有 RaisedButton 的样式小部件:

RaisedButton(
  color: Theme.of(context).accentColor,
  elevation: 0,
  shape: new RoundedRectangleBorder(
    side: BorderSide(color: Colors.white, width: 1.0, style: BorderStyle.solid),
    borderRadius: new BorderRadius.circular(30)),
)

这purportedly similar question由于主要基于意见而被关闭，但我不征求您的意见。我想问是否有 一种方法来设置这些按钮的样式，最好不涉及将小部件源代码复制粘贴到我自己的类中，正如接受的答案所建议的那样(尽管这仍然是唯一的方法这样做很可能就是答案)。

Answer 1

您实际上可以通过扩展 RaisedButton 类并覆盖您需要的默认属性来实现它。

例子:

class Sample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MyButton(onClicked: () => null,child: Text('Sample'),),
      ),
    );
  }
}

class MyButton extends RaisedButton {
  const MyButton({@required this.onClicked, this.child})
      : super(onPressed: onClicked, elevation: 0.0, child: child);

  final VoidCallback onClicked;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        buttonColor: Theme.of(context).accentColor,
        buttonTheme: Theme.of(context).buttonTheme.copyWith(
              shape: RoundedRectangleBorder(
                side: const BorderSide(
                  color: Colors.white,
                  width: 1.0,
                  style: BorderStyle.solid,
                ),
                borderRadius: BorderRadius.circular(30),
              ),
            ),
      ),
      child: Builder(builder: super.build),
    );
  }
}

在任何您希望RaisedButton 符合您的风格的地方使用MyButton。

希望这对您有所帮助!