普通按钮
- TextButton - 文本按钮
- OutlineButton - 空心按钮
- ElevatedButton - 凸起按钮
按钮属性
属性 | 类型 | 说明 |
---|---|---|
onPressed | Function | 点击事件 |
onLongPress | Function | 长按事件 |
child | Widget | 子组件 |
style | ButtonStyle | 自定义样式 |
ButtonStyle 属性
属性 | 类型 | 说明 |
---|---|---|
textStyle | MaterialStateProperty | 字体样式 |
foregroundColor | MaterialStateProperty | 按钮点击时字体样式 |
backgroundColor | MaterialStateProperty | 背景色 |
shadowColor | MaterialStateProperty | 阴影 |
elevation | MaterialStateProperty | 阴影长度 |
side | MaterialStateProperty | 边框 |
shape | MaterialStateProperty | 圆角 |
minimumSize | MaterialStateProperty | 按钮大小 |
overlayColor | MaterialStateProperty | 水波纹的颜色 |
主题相关的按钮
- TextButtonTheme - 文本按钮
- OutlinedButtonTheme- 空心按钮
- ElevatedButtonTheme - 凸起按钮
注意:如果设置style 样式,则主题样式不生效
IconButton - 图标按钮
- TextButton.icon - 图标文本按钮
- OutlineButton.icon - 图标空心按钮
- ElevatedButton.icon - 图标凸起按钮
- IconButton - 图标按钮
其他按钮
- ButtonBar - 按钮组
- BackButton - 回退按钮
- CloseButton - 关闭按钮
- FloatingActionButton - 浮动按钮
注意:浮动按钮配合Scaffold使用,与appBar、body 等是同级
代码示例
class Body extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20),
child: Wrap(
spacing: 10,
children: [
TextButton(
onPressed: () {
print('点击了TextButton');
},
onLongPress: () {
print('长按了TextButton');
},
child: Text('我是文本按钮'),
),
ElevatedButton(
onPressed: () {
print('点击了ElevatedButton');
},
onLongPress: () {
print('长按了ElevatedButton');
},
child: Text('我是ElevatedButton'),
),
OutlineButton(
onPressed: () {
print('点击了OutlineButton');
},
onLongPress: () {
print('长按了OutlineButton');
},
child: Text('我是OutlineButton'),
),
ElevatedButton(
onPressed: () {
print('点击了OutlineButton');
},
onLongPress: () {
print('长按了OutlineButton');
},
child: Text('自定义颜色'),
style: ButtonStyle(
textStyle: MaterialStateProperty.all(
TextStyle(
fontSize: 30
)
),
foregroundColor: MaterialStateProperty.resolveWith(
(states) {
if (states.contains(MaterialState.pressed)) {
// 按下按钮时的前景色
return Colors.red;
}
return Colors.red;
}
),
// 背景色
backgroundColor: MaterialStateProperty.resolveWith(
(states) {
if (states.contains(MaterialState.pressed)) {
// 按下按钮时的前景色
return Colors.green;
}
return Colors.white;
}
),
// 阴影
shadowColor: MaterialStateProperty.all(Colors.yellow),
// 阴影长度
elevation: MaterialStateProperty.all(20),
// 边框
side:MaterialStateProperty.all(
BorderSide(
color: Colors.green,
width: 3,
)
),
// 圆角
shape: MaterialStateProperty.all(
StadiumBorder(
side: BorderSide(
color: Colors.green,
width: 3,
)
)
),
// 设置按钮大小
minimumSize: MaterialStateProperty.all(Size(150, 60)),
// 设置水波纹的颜色
overlayColor: MaterialStateProperty.all(Colors.purple),
)
),
// 主题按钮
OutlinedButtonTheme(
data: OutlinedButtonThemeData(
style: ButtonStyle(
overlayColor: MaterialStateProperty.all(Colors.purple),
),
),
child: OutlinedButton(
child: Text('我时主题按钮'),
onPressed: () {
print('点击了OutlinedButton');
},
),
),
// 图标按钮
IconButton(
icon:Icon(Icons.accessible_outlined),
onPressed: () {
print('点击了图标按钮');
},
color: Colors.red, // 颜色
splashColor: Colors.lime, // 水波纹
highlightColor: Colors.pink, // 高亮时候颜色
tooltip: "怎么了", // 提示文字
),
// 按钮组
Container(
color: Colors.pink,
width: double.infinity,
child: ButtonBar(
children: [
ElevatedButton(
onPressed:(){},
child: Text('按钮组1')
),
ElevatedButton(
onPressed:(){},
child: Text('按钮组2')
)
]
)
),
// 回退按钮
BackButton(
color: Colors.red,
),
// 关闭按钮
CloseButton(),
]
),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Button'),
),
body: Body(),
floatingActionButton: FloatingActionButton(
onPressed: (){},
child: Text('我是浮动按钮'),
),
);
}
}