1.RaisedButton 即"漂浮"按钮,它默认带有阴影和灰色背景。按下后,阴影会变大
const RaisedButton({
Key key,
@required VoidCallback onPressed, //点击回调,不写按钮是禁用状态
ValueChanged<bool> onHighlightChanged, //水波纹高亮变化回调,按下返回true,抬起返回false
ButtonTextTheme textTheme, //按钮的主题
Color textColor, //文字的颜色
Color disabledTextColor, //按钮禁用时候文字的颜色
Color color, //按钮的背景颜色
Color disabledColor, //按钮被禁用的时候显示的颜色
Color highlightColor, //点击或者toch控件高亮的时候显示在控件上面,水波纹下面的颜色
Color splashColor, //水波纹的颜色
Brightness colorBrightness, //按钮主题高亮
double elevation, //按钮下面的阴影
double highlightElevation, //高亮时候的阴影
double disabledElevation, //不可用时候的阴影
EdgeInsetsGeometry padding, // padding间距
ShapeBorder shape, //设置形状
Clip clipBehavior = Clip.none, // 据此选项,内容将被剪裁(或不剪辑)
MaterialTapTargetSize materialTapTargetSize, // 配置点击目标的最小尺寸
Duration animationDuration, // 动画的持续时间
Widget child, // 按钮的标签部件
})
2.RaiseButton Examples
RaisedButton(
child: Text("测试按钮"),
onPressed: ()=>{},
onHighlightChanged: (val)=> print(val),
textTheme: ButtonTextTheme.accent,
textColor: Color.fromRGBO(255, 120, 66, 0.8),
disabledTextColor: Color(0xffae00),
color: Colors.green,
disabledColor: Colors.deepOrange,
colorBrightness: Brightness.light,
elevation: 6.0,
padding: EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 15.0), // left,top,right,bottom
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
side: BorderSide(width: 1.0,color: Colors.redAccent),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0))
),
),
3.FlatButton即扁平按钮,默认背景透明并不带阴影。按下后,会有背景色
const FlatButton({
Key key,
@required VoidCallback onPressed,
ValueChanged<bool> onHighlightChanged,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color disabledColor,
Color highlightColor,
Color splashColor,
Brightness colorBrightness,
EdgeInsetsGeometry padding,
ShapeBorder shape,
Clip clipBehavior = Clip.none,
MaterialTapTargetSize materialTapTargetSize,
@required Widget child,
})
4.OutlineButton默认有一个边框,不带阴影且背景透明。按下后,边框颜色会变亮、同时出现背景和阴影(较弱)
const OutlineButton({
Key key,
@required VoidCallback onPressed,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color highlightColor,
Color splashColor,
double highlightElevation: 2.0,
BorderSide borderSide,
Color disabledBorderColor,
Color highlightedBorderColor,
EdgeInsetsGeometry padding,
ShapeBorder shape,
Clip clipBehavior: Clip.none,
Widget child
})
5.IconButton是一个可点击的Icon,不包括文字,默认没有背景,点击后会出现背景
const IconButton({
Key key,
double iconSize: 24.0, //大小
EdgeInsetsGeometry padding: const EdgeInsets.all(8.0),
AlignmentGeometry alignment: Alignment.center, //对齐方式
@required Widget icon, //图标
Color color,
Color highlightColor,
Color splashColor,
Color disabledColor,
@required VoidCallback onPressed,
String tooltip // 长按后显示的提示
})
6.icon Example
IconButton(
icon: Icon(Icons.settings_overscan),
padding: EdgeInsets.all(10.0),
alignment: Alignment.center,
color: Colors.brown,
splashColor: Colors.lightGreen,
highlightColor: Colors.redAccent,
onPressed: ()=>{},
tooltip: "这是个按钮",
iconSize: 60,
),