Flutter中常见的Button类型有 FlatButton、 RaisedButton、 OutlineButton ，三者均继承自 MaterialButton ，MaterialButton是Material 风格按钮，不推荐直接使用，且内部实现主要通过Theme 、 ButtonTheme进行设置。
- MaterialButton build 方法实现截取:
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
final ButtonThemeData buttonTheme = ButtonTheme.of(context);
return RawMaterialButton(
...
fillColor: buttonTheme.getFillColor(this),
textStyle: theme.textTheme.button
.copyWith(color: buttonTheme.getTextColor(this)),
...
);
}
文档中有这样一段描述：
- FlatButton, RaisedButton, and OutlineButton have been replaced by
TextButton, ElevatedButton, and OutlinedButton respectively.- ButtonTheme has been replaced by TextButtonTheme,
ElevatedButtonTheme, and OutlinedButtonTheme.- The original classes
will be deprecated soon, please migrate code that uses them.
表明FlatButton、 RaisedButton、 OutlineButton 这三个也快被废除，
分别可以用TextButton, ElevatedButton, 和 OutlinedButton进行替换，后三者均继承自 ButtonStyleButton。
- ButtonStyleButton 抽象类
abstract class ButtonStyleButton extends StatefulWidget {
/// Create a [ButtonStyleButton].
const ButtonStyleButton({
Key key,
@required this.onPressed,
@required this.onLongPress,
@required this.style,
@required this.focusNode,
@required this.autofocus,
@required this.clipBehavior,
@required this.child,
})
以下部分介绍摘录自：flutter基础之组件基础Text
原文作者： 陌问MW
更详细介绍可转至原文查看。
1. MaterialButton属性介绍
const MaterialButton({
Key key,
//Function类型必传参数，为当按钮点击时的回调方法，如果为null，按钮将处于禁用状态
@required this.onPressed,
//Function类型可选命名参数，为当长按按钮时的回调方法
this.onLongPress,
//Function类型可选命名参数，为当按钮突出(高亮)显示或停止突出显示时调用的回调方法，参数bool类型
this.onHighlightChanged,
//ButtonTextTheme类型可选命名参数，用来定义按钮的基本颜色，最小尺寸，内部填充和形状的默认值
this.textTheme,
//Color类型可选命名参数，为按钮文本的颜色
this.textColor,
//Color类型可选命名参数，为按钮禁用时的按钮文本的颜色
this.disabledTextColor,
//Color类型可选命名参数，按钮状态为可用时且未被点击时的填充色
this.color,
//Color类型可选命名参数，为按钮禁用时的按钮填充颜色
this.disabledColor,
//Color类型可选命名参数，当按钮具有输入焦点时的填充颜色
this.focusColor,
//Color类型可选命名参数，指针悬停在按钮上时的填充颜色
this.hoverColor,
//Color类型可选命名参数，用于设置按钮的高亮颜色
this.highlightColor,
//Color类型可选命名参数，按钮点击时水波纹效果的颜色
this.splashColor,
//Brightness类型可选命名参数，用于设置按钮的主题亮度
this.colorBrightness,
//double类型可选命名参数，相对于其父级放置此按钮的z坐标，可用于控制凸起按钮下方的
//阴影大小，默认值为2，不能为负数
this.elevation,
//double类型可选命名参数，当按钮启用并具有焦点时，按钮的elevation
this.focusElevation,
//double类型可选命名参数，当按钮启用且指针悬停在按钮上方时，按钮的按钮的elevation
this.hoverElevation,
//double类型可选命名参数，按钮为启用状态并被按下时其相对于父级的高程
this.highlightElevation,
//double类型可选命名参数，当按钮为不可用状态时其相对于父级的高程
this.disabledElevation,
//EdgeInsetsGeometry类型可选命名参数，设置按钮的内边距
this.padding,
//ShapeBorder类型可选命名参数，设置按钮形状
this.shape,
//Clip类型可选命名参数，用于设置内容将被如何裁剪
this.clipBehavior = Clip.none,
//FocusNode类型可选命名参数，按钮的焦点节点
this.focusNode,
//bool类型可选命名命名参数，用于设置是否按钮为当前焦点
this.autofocus = false,
//MaterialTapTargetSize类型可选命名参数，设置按钮的最小点击尺寸
this.materialTapTargetSize,
//Duration类型可选命名参数，用于定义按钮形状或高亮变化的动画的持续时间
this.animationDuration
//double类型可选命名参数，按钮的最小宽度
this.minWidth,
//double类型可选命名参数，按钮的高度
this.height,
//bool类型可选命名参数，当检测到手势时，是否提供听觉视觉的反馈
this.enableFeedback = true,
//Widget类型可选命名参数，是为按钮设置的显示标签，可以为任意Widget，通常使用Text
this.child,
})
2. ButtonStyleButton属性介绍
abstract class ButtonStyleButton extends StatefulWidget {
/// Create a [ButtonStyleButton].
const ButtonStyleButton({
Key key,
// VoidCallback类型可选命名参数
// typedef VoidCallback = void Function();
@required this.onPressed,
// 同上
@required this.onLongPress,
// ButtonStyle 类型
@required this.style,
//FocusNode 类型
@required this.focusNode,
//bool
@required this.autofocus,
//Clip
@required this.clipBehavior,
//Widget
@required this.child,
})
3. 使用示例
3.1 FlatButton / TextButton
-
FlatButton
//FlatButton ---- > TextButton
class FlatButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return FlatButton(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Image(
image: AssetImage('assets/images/xk.jpg'),
width: 40,
height: 40,
),
Text('平的按钮', style: TextStyle(fontSize: 20)),
],
),
textColor: Colors.red,
color: Colors.grey,
textTheme: ButtonTextTheme.accent,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
onPressed: () {
print('FlatButton_onPressed');
},
);
}
}
-
TextButton
class TextButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return TextButton(
onPressed: () {
print('textButton');
},
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Image(
image: AssetImage('assets/images/xk.jpg'),
width: 40,
height: 40,
),
Text('平的按钮')
],
),
style: ButtonStyle(
textStyle: MaterialStateProperty.all(TextStyle(
color: Colors.white,
fontSize: 20,
)),
backgroundColor:
MaterialStateColor.resolveWith((states) => Colors.red),
minimumSize:
MaterialStateProperty.resolveWith((states) => Size(40, 40)),
padding: MaterialStateProperty.resolveWith(
(states) => EdgeInsets.zero)));
}
}
3.2 RaisedButton / ElevatedButton
-
RaisedButton
class RaiseButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
child: Text(
'凸起按钮',
style: TextStyle(color: Colors.white),
),
color: Colors.red,
// textColor: Colors.green,
onPressed: () {
print('RaisedButton_onPressed');
},
onLongPress: () {
print('RaisedButton_onLongPress');
},
);
}
}
-
ElevatedButton
class ElevatedButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ElevatedButton(
child: Text('ElevatedButton'),
onPressed: () {
print('ElevatedButton');
},
);
}
}
3.3 OutlineButton / OutlinedButton
-
OutlineButton
class OutlineButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return OutlineButton(
child: Text('轮廓'),
textColor: Colors.blue,
color: Colors.red,
onPressed: () {
print('OutlineButton_onPressed');
},
);
}
}
-
OutlinedButton
class OutlinedButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return OutlinedButton(
child: Text('OutlinedButton'),
onPressed: () {
print('OutlinedButton');
},
);
}
}
4. 自定义Button
4.1 MaterialButton Widget。
//自定义按钮 带图片文字
class CustomeButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialButton(
onPressed: () {
print('CustomeButton');
},
color: Colors.purple,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.favorite,
color: Colors.red,
),
Text('提交')
],
));
}
}
4.2 ButtonTheme Widget
//自定义按钮2 更新默认设置大小及内边距
class CustomeButton2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ButtonTheme(
minWidth: 40,
height: 20,
padding: EdgeInsets.all(5),
buttonColor: Colors.green,
focusColor: Colors.red,
child: OutlineButton(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.favorite,
color: Colors.red,
),
Text('提交')
],
),
textColor: Colors.blue,
color: Colors.red,
onPressed: () {
print('CustomeButton2');
},
),
);
}
}
5. 测试代码
import 'package:flutter/material.dart';
main(List args) {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('基本部件 - Button'),
),
body: Center(
child: HomeButtonsContent(),
),
floatingActionButton: FloatingActionButtonDemo(),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
),
));
}
class HomeButtonsContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [FlatButtonDemo(), TextButtonDemo()],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [RaiseButtonDemo(), ElevatedButtonDemo()],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [OutlineButtonDemo(), OutlinedButtonDemo()],
),
CustomeButton(),
CustomeButton2(),
],
);
}
}
Button样式