|
Flutter 系列文章 总体目录
RaisedButton、 FlatButton 、OutlineButton的区别
|
|
| RaisedButton |
带阴影的按钮 |
| FlatButton |
无阴影的按钮 |
| OutlineButton |
带边框的按钮 |
效果如果：
1、RaisedButton
基本属性如下：
|
|
| onPressed |
点击时触发，如果不设置此属性 Button为不可用状态  |
| onHighlightChanged |
高亮变化回调，参数：是否高亮，按下时高亮，抬起不高亮， |
| textTheme |
字体theme，属性有：ButtonTextTheme.normal、ButtonTextTheme.accent、ButtonTextTheme.primary  |
| textColor |
字体颜色 |
| disabledTextColor |
禁用状态下字体颜色 |
| color |
背景颜色 |
| disabledColor |
禁用状态下背景颜色 |
| highlightColor |
高亮颜色，按下时的颜色 |
| splashColor |
水波纹颜色，按下松开会有水波纹效果 |
| colorBrightness |
字体亮度 设置了textColor、color颜色，此值无效  |
| elevation |
阴影z轴的值 ，注意看阴影 |
| highlightElevation |
高亮 阴影z轴的值 |
| disabledElevation |
禁用阴影z轴的值 |
| padding |
padding |
| shape |
形状，系统内置了很多shape  以Border为例： |
| clipBehavior |
暂时想不到干什么的 |
| materialTapTargetSize |
暂时想不到干什么的 |
| animationDuration |
暂时想不到干什么的 |
| child |
一般是Text |
可以通过RaisedButton.icon设置一个icon
RaisedButton.icon(
onPressed: () {},
icon: Icon(Icons.access_alarm),
label: Text('label')),
2、FlatButton
FlatButton的属性和RaisedButton一样
3、OutlineButton
|
|
| borderSide |
边框样式 ,BorderStyle 样式如下 |
| disabledBorderColor |
禁用状态下边框颜色 |
| highlightedBorderColor |
高亮状态下边框颜色 |
4、ButtonBar
ButtonBar 一横排的Button布局
|
|
| alignment |
布局方向，默认MainAxisAlignment.end |
| mainAxisSize |
主轴大小，默认MainAxisSize.max |
| children |
Button集合 |
demo：
import 'package:flutter/material.dart';
class ButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Column(
children: <Widget>[
Row(
children: <Widget>[
RaisedButton(
onPressed: (){print('onPressed');},
child: Text('RaisedButton'),
),
FlatButton(
onPressed: () {},
child: Text('FlatButton'),
),
OutlineButton(
onPressed: () {},
color: Colors.red,
child: Text('OutlineButton'),
),
],
),
Row(
children: <Widget>[
OutlineButton(
onPressed: () {},
child: Text('none'),
borderSide: BorderSide(color:Colors.green,width: 2.0,style: BorderStyle.none),
),
OutlineButton(
onPressed: () {},
child: Text('solid'),
borderSide: BorderSide(color:Colors.green,width: 2.0,style: BorderStyle.solid),
),
],
),
Row(
children: <Widget>[
RaisedButton(
onPressed: (){print('onPressed');},
child: Text('onPressed'),
),
RaisedButton(
child: Text('not press'),
),
],
),
Row(
children: <Widget>[
RaisedButton(
onPressed: (){print('onPressed');},
child: Text('normal'),
textTheme: ButtonTextTheme.normal,
),
RaisedButton(
onPressed: (){print('onPressed');},
child: Text('accent'),
textTheme: ButtonTextTheme.accent,
),
RaisedButton(
onPressed: (){print('onPressed');},
child: Text('primary'),
textTheme: ButtonTextTheme.primary,
),
],
),
Row(
children: <Widget>[
RaisedButton(
child: Text('not press'),
disabledColor: Colors.red,
)
],
),
Row(
children: <Widget>[
RaisedButton(
onPressed: (){print('onPressed');},
child: Text('darks'),
colorBrightness: Brightness.dark,
),
RaisedButton(
onPressed: (){print('onPressed');},
child: Text('light'),
colorBrightness: Brightness.light,
),
],
),
Row(
children: <Widget>[
RaisedButton(
onPressed: (){print('onPressed');},
child: Text('elevation=10'),
elevation: 10,
),
],
),
Row(
children: <Widget>[
RaisedButton(
onPressed: (){print('onPressed');},
child: Text('Border'),
shape: Border.all(),
),
],
),
Row(
children: <Widget>[
RaisedButton(
onPressed: (){print('nonenonenonenonenone');},
child: Text('nonenonenonenonenone'),
clipBehavior: Clip.none,
),
RaisedButton(
onPressed: (){print('hardEdge');},
child: Text('hardEdge'),
clipBehavior: Clip.hardEdge,
),
],
),
Row(
children: <Widget>[
RaisedButton(
onPressed: (){print('antiAlias');},
child: Text('antiAlias'),
clipBehavior: Clip.antiAlias,
),
RaisedButton(
onPressed: (){print('antiAliasWithSaveLayer');},
child: Text('antiAliasWithSaveLayer'),
clipBehavior: Clip.antiAliasWithSaveLayer,
),
],
),
RaisedButton.icon(
onPressed: () {},
icon: Icon(Icons.access_alarm),
label: Text('label')
),
Container(
child: ButtonBar(
children: <Widget>[
RaisedButton(child: Text('ButtonBar'),),
RaisedButton(child: Text('ButtonBar'),),
RaisedButton(child: Text('ButtonBar'),),
],
),
),
],
);
}
}
整体效果：
 |
转播
