Flutter中的常见的按钮组件以及⾃定义按钮组件
⼀、Flutter 中的按钮组件介绍
Flutter ⾥有很多的 Button 组件很多，常见的按钮组件有：RaisedButton、FlatButton、
IconButton、OutlineButton、ButtonBar、FloatingActionButton 等。
RaisedButton ：凸起的按钮，其实就是 Material Design 风格的 Button
FlatButton ：扁平化的按钮
OutlineButton：线框按钮
IconButton ：图标按钮
ButtonBar：按钮组
FloatingActionButton：浮动按钮
⼆、Flutter 按钮组件中的⼀些属性
onPressed  VoidCallback，⼀般接收⼀个⽅法必填参数，按下按钮时触发的回调，接收⼀个⽅法，传 null 表⽰按钮禁⽤，会显⽰禁⽤相关样式
child  Widget
textColor  Color ⽂本颜⾊
color Color 按钮的颜⾊
disabledColor  Color  按钮禁⽤时的颜⾊
disabledTextColor  Color  按钮禁⽤时的⽂本颜⾊
splashColor  Color  点击按钮时⽔波纹的颜⾊
highlightColor  Color  点击（长按）按钮后按钮的颜⾊
elevation  double  阴影的范围，值越⼤阴影范围越⼤
padding  内边距
shape  设置按钮的形状
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(10),
)
shape: CircleBorder(
side: BorderSide(
color: Colors.white,
)
)
案例代码
import 'package:flutter/material.dart';
class ButtonDemoPage extends StatelessWidget {
const ButtonDemoPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("按钮演⽰页⾯"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: (){
},
)
],
),
body: Column(
mainAxisAlignment: ,
children: <Widget>[
MaterialButton(
height: Screen.width(height: 85),
color: lorMain(),
textColor: Colors.white,
elevation: 2.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(Screen.width(8)))
),
child: Text('确认', style: TextStyle(fontSize: Screen.width(28)),),
onPressed:() {},
),
Row(
mainAxisAlignment: ,              children: <Widget>[
RaisedButton(
child: Text('普通按钮'),
onPressed: () {
print("普通按钮");
},
),
SizedBox(width: 5),
RaisedButton(
child: Text('颜⾊按钮'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
print("有颜⾊按钮");
},
),
SizedBox(width: 5),
RaisedButton(
child: Text('阴影按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("有阴影按钮");
},
)
,
SizedBox(width: 5),
RaisedButton.icon(
icon: Icon(Icons.search),
label: Text('图标按钮'),
color: Colors.blue,
textColor: Colors.white,
// onPressed: null,
onPressed: () {
print("图标按钮");
})
]
,
),
SizedBox(height: 10),
Row(
mainAxisAlignment: ,              children: <Widget>[
Container(
height: 50,
width: 400,
child: RaisedButton(
child: Text('宽度⾼度'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("宽度⾼度");
},
),
)
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: ,              children: <Widget>[
Expanded(
child: Container(
height: 60,
margin: EdgeInsets.all(10),
child: RaisedButton(
child: Text('⾃适应按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("⾃适应按钮");
},
),
),
)
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: ,
children: <Widget>[
RaisedButton(
child: Text('圆⾓按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
onPressed: () {
print("圆⾓按钮");
}),
Container(
height: 80,
child: RaisedButton(
child: Text('圆形按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
splashColor: d,
shape:
CircleBorder(side: BorderSide(color: Colors.white)),
onPressed: () {
print("圆形按钮");
}),
),
FlatButton(
child: Text("按钮"),
color: Colors.blue,
textColor: llow,
onPressed: () {
print('FlatButton');
},
),
SizedBox(width: 10),
OutlineButton(
child: Text("按钮"),
//  color: d,  //没有效果
//  textColor: llow,
onPressed: () {
print('FlatButton');
})
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: ,
flutter开发appchildren: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.all(20),
height: 50,
child: OutlineButton(child: Text("注册"), onPressed: () {}),
),
)
],
),
Row(
mainAxisAlignment: d,
children: <Widget>[
ButtonBar(
children: <Widget>[
RaisedButton(
child: Text('登录'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("宽度⾼度");
},
),
RaisedButton(
child: Text('注册'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("宽度⾼度");
},
)
,
MyButton(text: "⾃定义按钮",height: 60.0,width: 100.0,pressed: (){                      print('⾃定义按钮');
})
],
)
],
)
],
));
}
}
/
/⾃定义按钮组件
class MyButton extends StatelessWidget {
final text;
final pressed;
final width;
final height;
const MyButton({='',this.pressed=null,this.width=80,this.height=30}) ;  @override
Widget build(BuildContext context) {
return Container(
height: this.height,
width: this.width,
child: RaisedButton(
child: ),
onPressed:this.pressed ,
),
);
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。