Flutter 2.0 如何将提升按钮主题更改为看起来像 RaisedButton答案

【问题标题】：Flutter 2.0 how to change elevatedButtonTheme to look like RaisedButtonFlutter 2.0 如何将提升按钮主题更改为看起来像 RaisedButton
【发布时间】：2021-03-10 03:47:57
【问题描述】：

由于在 Flutter 2.0 中 RaisedButton 已更改为 ElevatedButton，我尝试为该按钮创建一个默认主题，但我不知道该怎么做。

这是我放在 main() 中的内容

elevatedButtonTheme: ElevatedButtonThemeData(
            style: ButtonStyle(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20))),
          ),

我收到以下错误

The argument type 'RoundedRectangleBorder' can't be assigned to the parameter type 'MaterialStateProperty<OutlinedBorder>'.

我不知道如何使用 MaterialStateProperty 参数，因为它没有给我任何关于如何使用它的线索。我阅读了文档，但没有关于此的示例。

有人知道吗？

【问题讨论】：

标签： flutter

【解决方案1】：

您可以在ButtonStyle 上参考这个documentation 以了解要使用哪些MaterialStateProperty 字段。

例如，要定义形状，可以使用以下代码：

shape: MaterialStateProperty.resolveWith<OutlinedBorder>((_) {
             return RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20)))
             );
           }),

完整示例：

ElevatedButtonTheme(
  data: ElevatedButtonThemeData(
    style: ButtonStyle(
      side: MaterialStateProperty.resolveWith<BorderSide>(
          (states) => BorderSide(color: borderColor ?? Colors.black)),
      backgroundColor: MaterialStateProperty.resolveWith<Color>(
          (states) => Colors.white),
      shape: MaterialStateProperty.resolveWith<OutlinedBorder>((_) {
        return RoundedRectangleBorder(borderRadius: BorderRadius.circular(20));
      }),
      textStyle: MaterialStateProperty.resolveWith<TextStyle>(
          (states) => TextStyle(color: Colors.red)),
    ),
  ),
  child: ElevatedButton(onPressed: () {}, child: Text('label')),
);

【讨论】：

【解决方案2】：

试试这个

    ElevatedButton(
              onPressed: () {},
              child: Text("Button"),
              style: TextButton.styleFrom(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20))),
            ),

  elevatedButtonTheme: ElevatedButtonThemeData(
          style: TextButton.styleFrom(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20))),
        ),

【讨论】：

【解决方案3】：

您可以使用 Flutter 团队的这份指南 https://docs.google.com/document/d/1yohSuYrvyya5V1hB6j9pJskavCdVq9sVeTqSoEPsWH0/edit

但这是使 ElevatedButton 看起来像 RaisedButton 的正确代码

final ButtonStyle raisedButtonStyle = ElevatedButton.styleFrom(
  onPrimary: Colors.black87,
  primary: Colors.grey[300],
  minimumSize: Size(88, 36),
  padding: EdgeInsets.symmetric(horizontal: 16),
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(2)),
  ),
);
ElevatedButton(
  style: raisedButtonStyle,
  onPressed: () { },
  child: Text('Looks like a RaisedButton'),
)

【讨论】：

【解决方案4】：

试试这个

ElevatedButton(
    style: ButtonStyle(
        shape: MaterialStateProperty.all<OutlinedBorder>(
            RoundedRectangleBorder(
                side:
                    BorderSide(width: 1.0, color: Color.black),
                borderRadius:
                    BorderRadius.circular(5.0))),
        backgroundColor: MaterialStateProperty.all<Color>(Color.red),
        foregroundColor: MaterialStateProperty.all<Color>(Color.green),
        elevation:
            MaterialStateProperty.all<double>(8.0),
        padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
            const EdgeInsets.symmetric(
                horizontal: 20.0,
                vertical: 5.0))),
    onPressed: (){},
    child: Text('Tap Me'))

【讨论】：