将已弃用的 RaisedButton 替换为 ElevatedButton

Question

我是这样使用RaisedButton的：

RaisedButton(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
                        onPressed: null,
                        padding: EdgeInsets.all(12.0),
                        color: Colors.blue,
                        child: Text("Button", style: TextStyle(color: Colors.white)))

他们决定弃用 RaisedButton，应该使用 ElevatedButton。但是，缺少 padding 和 shape 属性。如何使用ElevatedButton获得相同的效果？

Answer 1

您可以在 ElevatedButton 中使用 style 属性，然后您可以使用 ElevatedButton.styleFrom，您可以在其中找到填充和形状等属性。

这是一个例子：

ElevatedButton(
    style: ElevatedButton.styleFrom(
        primary: Colors.blue,
        elevation: 5,
        padding: const EdgeInsets.all(12.0),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30.0),
        ),
    ),
    onPressed: () {},
    child: Text(
        "Button",
        style: TextStyle(color: Colors.white),
    ),
),

Answer 2

试试这个代码希望它对你有帮助它类似于 RaisedButton

    ElevatedButton(
        onPressed: () {},
        style: ElevatedButton.styleFrom(
          fixedSize: Size(90, 15),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(24.0),
            ),
          ),
        ),
        child: Text("ok"),
      ),

您的结果屏幕->

Answer 3

让我们试试这个并并排展示

Column(
              children: [
                RaisedButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(24.0)),
                    onPressed: null,
                    padding: EdgeInsets.all(12.0),
                    color: Colors.blue,
                    child:
                        Text("Button", style: TextStyle(color: Colors.white))),
                SizedBox(
                  height: 10,
                ),
                ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        onPrimary: Colors.blue,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(24.0),
                        )),
                    onPressed: () {},
                    child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 12.0),
                      child:
                          Text("Button", style: TextStyle(color: Colors.white)),
                    )),
              ],
            ),

输出：

Answer 4

只需用此替换您的代码

ElevatedButton(
style: ElevatedButton.styleFrom(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
  padding: const EdgeInsets.all(12.0),
  primary: Colors.blue,
),
onPressed: null,
child: const Text('Button', style: TextStyle(color: Colors.white))),

将已弃用的 RaisedButton 替换为 ElevatedButton

Replace deprecated RaisedButton with ElevatedButton

button

dart

deprecation-warning

flutter