Flutter 升高按钮与升高按钮、扁平按钮与文本按钮、大纲按钮与大纲按钮

我看到了使用旧按钮的警告：

“RaisedButton”已弃用，不应使用

“FlatButton”已弃用，不应使用

“OutlineButton”已弃用，不应使用

那么，这两者之间的区别是什么：

• RaisedButton

  和

  RaisedButton

• FlatButton

  vs

  TextButton

• OutlineButton

  vs

  OutlineButton

---

我的理解是，它们实际上是等价的。根据调查，主要的动机是围绕造型。在Flatter 1.22之前，只有一个按钮用于3种类型的按钮，而现在每种类型的按钮都有自己的主题。
您不能在OutlineButton上设置

边框

，也不能在OutlineButton上设置

形状

，即使您可以在OutlineButton上设置，但第一种按钮都是过时的类
来自《颤振》的语录：
FlatButton、RaisedButton和OutlineButton已分别替换为TextButton、ElevatedButton和OutlineButton
原始类将很快被弃用，请迁移使用它们的代码

---

这些都是过时的类，因此最终需要删除旧代码。（而且，这将帮助您做到这一点。）然而，这可能需要大量的工作，所以为了让事情进展顺利，我创建了一些代码，将FlatButton和RaisedButton迁移到新的TextButton和ElevatedButton“原地”。它们彼此类似，但它们以不同的方式处理样式，这段代码对此进行了处理
如果您想在dartpad.dev中运行它，这里有一个指向要点的链接（我无法直接将其链接到该链接）：
下面是代码本身：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bool disableButton = true; // <-- Change this to see buttons disabled
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlatButton(
                  child: Text("FlatButton"),
                  onPressed: disableButton
                      ? null
                      : () {
                          print("FlatButton normal");
                        },
                  color: Colors.green,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                  disabledColor: Colors.grey,
                  disabledTextColor: Colors.pink),
              SizedBox(height: 25),
              FlatButtonX(
                  childx: Text("TextButton"),
                  onPressedx: disableButton
                      ? null
                      : () {
                          print("FlatButtonX (TextButton)");
                        },
                  colorx: Colors.green,
                  textColorx: Colors.black,
                  shapex: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                  disabledColorx: Colors.grey,
                  disabledTextColorx: Colors.pink),
              SizedBox(height: 100),
              RaisedButton(
                child: Text('RaisedButton'),
                color: Colors.green,
                textColor: Colors.black,
                onPressed: disableButton
                      ? null
                      : () {
                          print("RaisedButton normal");
                        },
                shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                disabledColor: Colors.grey,
                  disabledTextColor: Colors.pink,
              ),
              SizedBox(height: 25),
              RaisedButtonX(
                childx: Text('ElevatedButton'),
                colorx: Colors.green,
                textColorx: Colors.black,
                onPressedx:disableButton
                      ? null
                      : () {
                          print("RaisedButtonX (ElevatedButton)");
                        },
                shapex: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                                  disabledColorx: Colors.grey,
                  disabledTextColorx: Colors.pink,
              )
            ],
          ),
        ),
      ),
    );
  }
}

Widget FlatButtonX(
    {Color colorx,
    @required Widget childx,
    RoundedRectangleBorder shapex,
    @required Function onPressedx,
    Key keyx,
    Color disabledColorx,
    Color disabledTextColorx,
    Color textColorx}) {
  if (disabledTextColorx == null && textColorx == null) {
    disabledTextColorx = colorx;
  }
  if (textColorx == null) {
    textColorx = colorx;
  }
  return TextButton(
      key: keyx,
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
          // text color
          (Set<MaterialState> states) => states.contains(MaterialState.disabled)
              ? disabledTextColorx
              : textColorx,
        ),
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
          // background color    this is color:
          (Set<MaterialState> states) =>
              states.contains(MaterialState.disabled) ? disabledColorx : colorx,
        ),
        shape: MaterialStateProperty.all(shapex),
      ),
      onPressed: onPressedx as void Function(),
      child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0), child: childx));
}

Widget RaisedButtonX(
    {Color colorx,
    @required Widget childx,
    RoundedRectangleBorder shapex,
    @required Function onPressedx,
    Key keyx,
    Color disabledColorx,
    Color disabledTextColorx,
    Color textColorx}) {
  if (disabledTextColorx == null && textColorx == null) {
    disabledTextColorx = colorx;
  }
  if (textColorx == null) {
    textColorx = colorx;
  }
  return ElevatedButton(
      key: keyx,
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
          // text color
          (Set<MaterialState> states) => states.contains(MaterialState.disabled)
              ? disabledTextColorx
              : textColorx,
        ),
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
          // background color    this is color:
          (Set<MaterialState> states) =>
              states.contains(MaterialState.disabled) ? disabledColorx : colorx,
        ),
        shape: MaterialStateProperty.all(shapex),
      ),
      onPressed: onPressedx as void Function(),
      child: childx);
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
final bool disableButton=true；//states.contains（MaterialState.disabled）
？禁用ExtColorX
：textColorx，
),
backgroundColor:MaterialStateProperty.resolveWith(
//背景色这是一种颜色：
（设置状态）=>
states.contains（MaterialState.disabled）？DisabledColor:colorx，
),
形状：MaterialStateProperty.all（shapex），
),
onPressed:onPressedx作为无效函数（），
孩子：填充(
填充：常量边集。对称（水平：8.0），子级：childx）；
}
小部件RAISEDBUTTENX(
{Color colorx，
@必需的小部件childx，
圆形矩形边框shapex，
@所需功能已按X键，
钥匙钥匙，
颜色禁用颜色，
颜色禁用TextColorX，
彩色文本（COLORX}）{
if（disabledTextColorx==null&&textColorx==null）{
disabledTextColorx=colorx；
}
如果（textColorx==null）{
textColorx=colorx；
}
返回升降按钮(
key:keyx，
样式：钮扣样式(
foregroundColor:MaterialStateProperty.resolveWith(
//文本颜色
（设置状态）=>states.contains（MaterialState.disabled）
？禁用ExtColorX
：textColorx，
),
backgroundColor:MaterialStateProperty.resolveWith(
//背景色这是一种颜色：
（设置状态）=>
states.contains（MaterialState.disabled）？DisabledColor:colorx，
),
形状：MaterialStateProperty.all（shapex），
),
onPressed:onPressedx作为无效函数（），
儿童：childx）；
}

我在这里找到了
下面的图片说明了它们之间的区别
从视觉上看，新按钮看起来有点不同，因为它们匹配 当前材质设计规范和，因为它们的颜色是 根据整个主题的配色方案进行配置 在填充、圆角半径和 悬停/聚焦/按下反馈

---

您可以查看了解有关更改的更多信息。
与

提升按钮相比，
提升按钮的优点之一是，默认情况下，它实际上会选择主主题颜色

因此，您甚至不需要添加自定义背景色。如果您想偏离主主题或按钮的其他方面，您只需要在
提升按钮
中添加您自己的样式。
其他按钮，如
文本按钮
，
提升按钮
，以及
大纲按钮
，都不需要这不像以前那么容易。我们仍然可以使用软件包使用那些传统的按钮

我认为这更适合作为注释而不是答案。其次，我还没有检查，但我相信您也可以使用style属性在OutlinedBorder上设置borderSide。我希望他们能为这三个新类提供一些好的文档。我能找到的只是类声明。现在是示例或小部件描述文档。您好，wh在这里，你是指
主主题颜色吗？
RaisedButton
也这样做。
RaisedButton
需要明确指定样式。而
ElevatedButton
采用
主样本的颜色（主题）。谢谢你的回答。除了在他们的文本中看到黑色和紫色之外，我没有看到两者之间有任何显著的区别，除了禁用的
RaisedButton.icon
vs
ElevatedButton.icon
，这也只是一个颜色变化。你可以将此作为一个注释来写。