1、常用按钮
常用按钮 | 介绍 |
RaisedButton | 凸起的按钮,其实就是 Material Design 风格的 Button |
FlatButton | 扁平化的按钮 |
OutlineButton | 线框按钮 |
IconButton | 图标按钮 |
FloatingActionButton | 浮动按钮 |
ButtonBar | 按钮组 |
2、按钮中常用的属性
属性名称 | 值类型 | 属性值 |
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 ButtonPage extends StatelessWidget {
ButtonPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Button"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: (){
},
)
],
),
body: Column(
children: <Widget>[
Row(
children: <Widget>[
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text("RaisedButton"),
onPressed: () {
print("RaisedButton");
},
),
SizedBox(width: 10,),
FlatButton(
textColor: Colors.white,
color: Colors.blue,
child: Text("FlatButton"),
onPressed: () {
print("FlatButton");
},
),
SizedBox(width: 10,),
OutlineButton(
textColor: Colors.blue,
color: Colors.blue,
child: Text("OutlineButton"),
onPressed: () {
print("OutlineButton");
},
),
],
),
Row(
children: <Widget>[
Expanded(child: Container(
margin: EdgeInsets.all(10),
child: RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text("自适应RaisedButton"),
onPressed: () {
print("RaisedButton");
},
),
)),
],
),
FloatingActionButton(
onPressed: (){
},
child: Text("浮动"),
),
ButtonBar(
alignment:MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text("ButtonBar1"),
onPressed: () {
print("ButtonBar1");
},
),
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text("ButtonBar2"),
onPressed: () {
print("ButtonBar2");
},
),
MyButton(hight: 30,width: 100,onPressed: "自定义按钮",color: Colors.yellow,),
],
)
],
),
);
}
}
//自定义按钮
class MyButton extends StatelessWidget {
final double hight;
final double width;
final buttonName;
final onPressed;
final Color color;
MyButton({Key key, this.hight=20, this.width=20, this.buttonName="按钮", this.onPressed, this.color=Colors.blue}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: hight,
width: width,
child: RaisedButton(
color: color,
child: Text(buttonName),
onPressed: (){
print((onPressed));
}
,
),
);
}
}