Flutter基础组件: Button

Material组件库提供了多种按钮组件, 如: ElevatedButton, TextButton, OutlineButton等, 所有的Material组风格的按钮都有以下相同的特点:

1. 按下都有水波动画
2. 有一个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('点我');
  },
),