Material组件库提供了多种按钮组件, 如: ElevatedButton, TextButton, OutlineButton等, 所有的Material组风格的按钮都有以下相同的特点:
- 按下都有水波动画
- 有一个
onPressed属性必须设置
1. ElevatedButton
ElevatedButton
ElevatedButton(
child: const Text("hello world"),
onPressed: () {},
);
2. TextButton
TextButton即文本按钮，默认背景透明并不带阴影。按下后，会有背景色
TextButton
TextButton(
child: const Text('hello world'),
onPressed: () {
print('点我');
},
),
3. OutlinedButton
OutlinedButton默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)
OutlinedButton
OutlinedButton(
child: const Text('hello world'),
onPressed: () {
print('点我');
},
),
4. IconButton
IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景
IconButton
IconButton(
icon: const Icon(Icons.keyboard_arrow_right),
onPressed: () {},
)
5. FloatingActionButton
浮动原型按钮
FloatingActionButton
FloatingActionButton(
child: const Text('返回'),
onPressed: () {
print('点我');
},
),
5. 给按钮加图标
ElevatedButton、TextButton、OutlineButton都有一个icon构造函数，通过它可以轻松创建带图标的按钮
加图标的按钮
ElevatedButton.icon(
icon: const Icon(Icons.keyboard_arrow_left),
label: const Text('返回'),
onPressed: () {
print('点我');
},
),
TextButton.icon(
icon: const Icon(Icons.keyboard_arrow_left),
label: const Text('返回'),
onPressed: () {
print('点我');
},
),
OutlinedButton.icon(
icon: const Icon(Icons.keyboard_arrow_left),
label: const Text('返回'),
onPressed: () {
print('点我');
},
),
