【发布时间】：2021-01-18 15:06:38
【问题描述】：
我看到使用旧按钮的警告：
'RaisedButton' 已弃用，不应使用。
'FlatButton' 已弃用，不应使用。
'OutlineButton' 已弃用，不应使用。
那么，有什么区别：
-
RaisedButton和ElevatedButton -
FlatButton与TextButton -
OutlineButton与OutlinedButton
【问题讨论】：
标签： flutter
【发布时间】：2021-01-18 15:06:38
【问题描述】：
我的理解是它们确实是等价的。根据Flutter 1.22 announcement，主要动机是围绕造型。在 Flutter 1.22 之前，3 种按钮只有 ONE ButtonTheme，而现在每种按钮都有自己的主题。
【讨论】：
您不能在 OutlineButton 上设置 borderSide 或 shape，即使您可以在 OutlineButton 上设置
【讨论】：
-
我认为这比答案更适合作为 cmets。
-
其次，我还没有检查，但我相信你也可以使用 style 属性在 OutlinedBorder 上设置borderSide。
首先是过时的类。
来自 Flutter 的引用 documentation:
FlatButton、RaisedButton 和 OutlineButton 已分别替换为 TextButton、ElevatedButton 和 OutlinedButton。
原始类即将被弃用，请迁移使用它们的代码。
【讨论】：
-
我希望他们能为这三个新类提供一些好的文档。我能找到的只是类声明。现在是示例或小部件描述文档。
这些是过时的类，所以最终你的旧代码需要消失。 （而且，这个document 将帮助您做到这一点。）但是，这可能需要大量工作，所以为了让事情顺利进行，我创建了一些代码来将 FlatButton 和 RaisedButton 迁移到新的 TextButton 和 ElevatedButton '到位'。它们彼此相似，但它们以不同的方式处理样式，而这段代码处理了这些方式。
如果您想在 dartpad.dev 中运行它，这里有一个指向要点的链接（我无法直接链接）： 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);
}
【讨论】：
在这里我找到了 Migrating to the New Material Buttons and their Themes
的文档下图说明了所有之间的区别。
在视觉上，新按钮看起来有点不同，因为它们匹配 当前的材料设计规范，因为它们的颜色是 根据整体主题的 ColorScheme 进行配置。有 填充、圆角半径和 悬停/聚焦/按下反馈。
您可以查看 Changes Overview 了解有关更改的更多信息。
【讨论】：
-
感谢您的回答，除了在他们的文本中看到黑色和紫色之外，除了禁用
RaisedButton.icon和ElevatedButton.icon之外，我没有看到两者之间有任何显着差异，这也只是颜色变化。
ElevatedButton 相对于RaisedButton 的优点之一是它实际上会默认选择您的主题颜色。
因此，您甚至不需要添加自定义背景颜色。如果您想偏离主主题或按钮的其他方面的样式，您只需在 ElevatedButton 中引入您自己的样式。
【讨论】：
-
嗨，这里的
main theme color是什么意思？RaisedButton也这样做。 -
RaisedButton需要明确指定样式。而ElevatedButton采用primary Swatch（主题）的颜色。
TextButton、ElevatedButton 和 OutlinedButton 等替代按钮不像以前那样容易。我们仍然可以通过 legacy_buttons 包使用这些旧按钮
【讨论】：
-
你可以把它写成评论。
FlatButton、RaisedButton 和 OutlineButton 小部件已分别替换为 TextButton、ElevatedButton 和 OutlinedButton。
解释变化的链接：
https://flutter.dev/docs/release/breaking-changes/buttons
如何使用按钮：
【讨论】：
-
嗨，几乎所有答案中都已经提到了这一点。对于链接，您可以发表评论而不是费心写答案。