时间戳

首页 > 解决方案 > Flutter 2.0 如何将提升按钮主题更改为看起来像 RaisedButton

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

问题描述

由于在 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

解决方案

您可以参考此文档以ButtonStyle了解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')),
);

推荐阅读