Flutter06-基础组件-按钮

1.按钮

Material 组件库中提供了多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们都是直接或间接对RawMaterialButton组件的包装定制，所以他们大多数属性都和RawMaterialButton一样。

所有 Material 库中的按钮都有如下相同点：

  • 按下时都会有“水波动画”（又称“涟漪动画”，就是点击时按钮上会出现水波扩散的动画）。
  • 有一个onPressed属性来设置点击回调，当按钮按下时会执行该回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。

1.1.ElevatedButton

ElevatedButton 即"漂浮"按钮，它默认带有阴影和灰色背景。按下后，阴影会变大，如图所示：

image-20240216195336383

使用ElevatedButton非常简单，如：

ElevatedButton(
  child: Text("Submit"),
  onPressed: () {},
);

1.2.TextButton

TextButton即文本按钮，默认背景透明并不带阴影。按下后，会有背景色，如图所示：

image-20240216195533879

TextButton(
  child: const Text("normal"),
  onPressed: () {},
)

1.3.OutlineButton

OutlineButton默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)，如图所示：

OutlineButton(
  child: Text("normal"),
  onPressed: () {},
)

1.4.IconButton

IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景，如图所示：

image-20240216195912632 
IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {},
)

1.5.带图标的按钮

ElevatedButton、TextButton、OutlineButton都有一个icon 构造函数，通过它可以轻松创建带图标的按钮，如图所示：

image-20240216200108973

Column(
  children: [
    ElevatedButton.icon(
      icon: const Icon(Icons.send),
      label: const Text("发送"),
      onPressed: () => {},
    ),
    OutlineButton.icon(
      icon: const Icon(Icons.add),
      label: const Text("添加"),
      onPressed: () => {},
    ),
    TextButton.icon(
      icon: const Icon(Icons.info),
      label: const Text("详情"),
      onPressed: () => {},
    ),
  ],
)