1、普通按钮RaisedButton
无法自己设置高宽,可以通过父元素或通过给child组件内部组件外包一个Padding组件来设置高宽
RaisedButton(
child:
onPressed 点击事件,设置后点击按钮会产生水纹动画
textTheme:ButtonTextTheme.normal/ButtonTextTheme.accent/ButtonTextTheme.primary 字体主题颜色
textColor 字体颜色
disabledTextColor, 按钮禁用时候文字的颜色
color, 按钮的背景颜色
highlightColor, 点击或者toch控件高亮的时候显示在控件上面,水波纹下面的颜色
splashColor, 水波纹的颜色
colorBrightness, 按钮主题高亮
elevation, 按钮下面的阴影
highlightElevation, 高亮时候的阴影
disabledElevation, 按下的时候的阴影
focusColor,
hoverColor,
shape: 设置形状
(1) 圆角形状
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
side:BorderSide(color: ,width:,style: BorderStyle.solid/none) 边框样式
)
(2)圆形
CircleBorder(
side: BorderSide(color:Colors.blue,width: 1,style:BorderStyle.solid) 边框
),
...
)
文字带图标按钮
RaisedButton.icon(
onPressed: (){},
icon: Icon(Icons.home),
label: Text('带图标'),
),
扁平按钮,可以.icon带图标
FlatButton(
child: Text('按钮'),
onPressed: (){},
color: Colors.blue,
),
边框按钮背景无色,可以.icon带图标
OutlineButton( //边框按钮背景无色,可以.icon带图标
child: Text('扁平'),
onPressed: (){},
borderSide:BorderSide(color: Colors.red,width: 1,style:BorderStyle.solid) ,//设置边框
)
浮动按钮,圆形带阴影,一般在Scaffold中设置
FloatingActionButton(
child: Text("浮动"),
onPressed: (){},
backgroundColor: Colors.blue,
)
按钮组,水平排列多个按钮
ButtonBar(
children: <Widget>[
按钮一
按钮二
]),
代码示例:
import 'package:flutter/material.dart';
class Home4 extends StatefulWidget {
Home4({Key key}) : super(key: key);
@override
_Home2State createState() => _Home2State();
}
class _Home2State extends State<Home4> {
@override
Widget build(BuildContext context) {
return Container(
child: Column(children: <Widget>[
RaisedButton(
child: Text('添加回调函数才生效'),
onPressed: (){},
color:Theme.of(context).accentColor,
elevation: 20.0,
shape:RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
// side:BorderSide(color: ,width:,style: BorderStyle.solid/none)
)
),
Divider(),
//文字前加字体图标的按钮,其他属性和普通按钮相同
RaisedButton.icon(
onPressed: (){},
icon: Icon(Icons.home),
label: Text('带图标'),
shape: CircleBorder(
side: BorderSide(color:Colors.blue,width: 1,style:BorderStyle.solid)
),
),
Divider(),
FlatButton( //扁平按钮,可以.icon带图标
child: Text('按钮'),
onPressed: (){},
color: Colors.blue,
),
Divider(),
OutlineButton( //边框按钮背景无色,可以.icon带图标
child: Text('扁平'),
onPressed: (){},
borderSide:BorderSide(color: Colors.red,width: 1,style:BorderStyle.solid) ,
),
Divider(),
IconButton(
icon: Icon(Icons.hotel),
onPressed: (){},
iconSize: 20,
),
Divider(),
ButtonBar(
children: <Widget>[
RaisedButton.icon(
onPressed: (){},
icon: Icon(Icons.home),
label: Text('带图标'),
shape: CircleBorder(
side: BorderSide(color:Colors.blue,width: 1,style:BorderStyle.solid)
),
),
FlatButton( //扁平按钮,可以.icon带图标
child: Text('按钮'),
onPressed: (){},
color: Colors.blue,
),
]),
Divider(),
FloatingActionButton(//浮动按钮,圆形带阴影
child: Text("浮动"),
onPressed: (){},
backgroundColor: Colors.blue,
)
],),
);
}
}