RaisedButton和ElevatedButton的区别，FlatButton和TextButton的区别以及OutlineButton和OutlinedButton的区别。

Question

我看到使用旧按钮时出现了警告：

'RaisedButton'已被弃用，不应再使用。

'FlatButton'已被弃用，不应再使用。

'OutlineButton'已被弃用，不应再使用。

那么，以下按钮之间有何区别:

• RaisedButton 和 ElevatedButton
• FlatButton vs TextButton
• OutlineButton vs OutlinedButton

- iDecode

Answer 1

我找到了关于迁移到新材料按钮及其主题的文档。

下面的图片说明了它们之间的区别。

新的按钮在视觉上看起来有些不同，因为它们符合当前的Material Design规范，并且它们的颜色是根据整个主题的ColorScheme进行配置的。在填充、圆角半径和悬停/聚焦/按下反馈方面还有其他小差异。

您可以查看变更概述以获取更多关于变更的信息。

- Pratik Butani

---

谢谢你的回答。除了在文本中看到黑色与紫色之外，我没有看到两者之间有任何显着的区别，除了禁用 RaisedButton.icon 和 ElevatedButton.icon，这也只是一种颜色变化。 - iDecode

Answer 2

首先是过时的类。

引自Flutter 文档：

FlatButton、RaisedButton 和 OutlineButton 分别已被 TextButton、ElevatedButton 和 OutlinedButton 替换。

原始类很快将被弃用，请迁移使用这些类的代码。

- Konstantin Bogomolov

---

我希望他们能够为这三个新类提供一些好的文档。我所能找到的只有类声明，没有示例或小部件描述文档。 - Adrian Smith

Answer 3

这些是过时的类，因此您的旧代码最终需要消失。(而且，这个文档将帮助您做到这一点。)然而，这可能是很多工作，所以为了让事情顺利进行，我创建了一些代码来将FlatButton和RaisedButton迁移到新的TextButton和ElevatedButton'就地'。它们是相似的，但它们以不同的方式处理样式，这段代码可以处理。

如果您想在dartpad.dev中运行它，这里是链接到gist的链接(我无法直接链接)：https://gist.github.com/wterrill/7942b4bf5d74a8b2ace952ebf213fe5d 这是代码本身：

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);
}

- William Terrill

Answer 4

< p > ElevatedButton 相对于 RaisedButton 的优点之一是，默认情况下它会选择您的主题颜色。

因此，您甚至不需要添加自定义背景颜色。如果您想偏离主题或样式化按钮的其他方面，您只需要在 ElevatedButton 中引入自己的样式即可。

- balu k

---

你好，这里的“主题颜色”是什么意思？RaisedButton也可以实现这个功能。 - iDecode

必须显式地为 RaisedButton 指定样式。而 ElevatedButton 将使用 primary Swatch（主题）的颜色。 - balu k

Answer 5

我的理解是它们确实是等价的。根据Flutter 1.22 announcement，主要动机在于样式设计。在Flutter 1.22之前，只有一个ButtonTheme适用于三种类型的按钮，而现在每种类型的按钮都有自己的主题。

- AWhitford

Answer 6

FlatButton、RaisedButton 和 OutlineButton 小部件已分别被 TextButton、ElevatedButton 和 OutlinedButton 替换。

更改说明链接：

https://flutter.dev/docs/release/breaking-changes/buttons

如何使用按钮：

https://flutter.dev/docs/development/ui/widgets/material

- live-love

---

嗨，这几乎在所有答案中都已经提到了。对于链接，您可以发表评论而不是费心写一个答案。 - iDecode

Answer 7

即使在 OutlineButton 上可以设置 borderSide 和 shape，但在 OutlinedButton 上却不能。

- Adam Smaka

---

我认为这更适合作为注释而不是答案。 - iDecode

其次，我还没有检查，但我相信您可以使用样式属性在OutlinedBorder上设置borderSide。 - iDecode

Answer 8

类似TextButton、ElevatedButton和OutlinedButton这样的备选按钮不再像以前那么容易使用。我们仍然可以使用legacy_buttons包来使用这些传统按钮。

https://pub.dev/packages/legacy_buttons/

- Fathah Cr

---

你本可以把这个写成注释。 - iDecode