6

问题：如何RaisedButton以某种方式自动（如果可能）为我的应用程序中的所有小部件设置样式？

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

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

以下是我想用于所有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)),
)

这个据称相似的问题主要是基于意见的，但我不是在征求你的意见。我在问是否有一种方法来设置这些按钮的样式，最好不要像接受的答案所建议的那样将小部件源代码复制粘贴到我自己的类中（尽管如果这仍然是唯一的方法，那么这可能非常很好的答案）。

4

3 回答 3

11

您实际上可以通过扩展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),
    );
  }
}

MyButton随心所欲地使用RaisedButton您的风格。

希望这可以帮助！

于 2018-12-07T03:09:34.477 回答
2

你可以提取你的已经customized widget然后使用它everywhere。

在这里，您有 03 种可能性：

像Local Variable、Widget或Method一样使用它。

1-局部变量
代码：

var 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)),
      onPressed: null,
    );

用法：

Container(child: raisedButton),

2-方法

代码 ：

RaisedButton buildRaisedButton(BuildContext context) {
    return 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)),
          onPressed: null,
        );
  }

采用：

Container(child: buildRaisedButton(context)),

3-小部件

代码：

 class MyRaisedButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return 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)),
            onPressed: null,
          );
  }
}

采用：

Container( child: MyRaisedButton()),

请注意，您可以通过单击小部件并执行(ctrl +)来快速完成此操作。

结果将是：

在此处输入图像描述

于 2020-12-10T15:19:21.593 回答
0

尝试将您的小部件用作变量或方法。

于 2020-12-02T17:51:38.803 回答