Flutter 常用 Button 实例

2024-01-23 01:37:41

拥抱Flutter按钮的丰富世界：打造引人入胜的用户体验

在Flutter的交互式世界中，按钮扮演着至关重要的角色，它们引导用户，触发操作并增强整体用户体验。从醒目的ElevatedButton到灵活的IconButton，Flutter提供了一系列按钮类型，满足您应用的各种需求。

1. ElevatedButton：引人注目的矩形按钮

ElevatedButton是Flutter中最常用的按钮类型，以其标志性的矩形形状、柔和的阴影和醒目的填充颜色而闻名。这种按钮在应用程序中通常用于主要操作，其醒目的外观吸引用户注意力并传递紧迫感。

ElevatedButton(
  onPressed: () {
    // 回调函数
  },
  child: Text('按钮'),
);

2. IconButton：轻巧的圆形按钮

IconButton是一个轻巧的圆形按钮，通常用作辅助按钮或图标，为其他控件增添便利性。与ElevatedButton不同，IconButton没有阴影或填充颜色，这使其外观更简约，更适合细微的操作。

IconButton(
  onPressed: () {
    // 回调函数
  },
  icon: Icon(Icons.add),
);

3. FloatingActionButton：引人注目的浮动按钮

FloatingActionButton是一种浮动按钮，通常放置在屏幕底部，用于突出显示关键操作或快捷方式。其圆形形状、柔和的阴影和醒目的颜色使其在用户界面中脱颖而出，吸引用户采取行动。

FloatingActionButton(
  onPressed: () {
    // 回调函数
  },
  child: Icon(Icons.add),
);

4. MaterialButton：基本且灵活的按钮

MaterialButton是一个基本的按钮，具有矩形形状，没有阴影或填充颜色。它提供了一个高度可定制的选项，允许您根据应用程序的特定需求调整其外观和行为。

MaterialButton(
  onPressed: () {
    // 回调函数
  },
  child: Text('按钮'),
);

5. 按钮样式：个性化按钮外观

除了不同的按钮类型之外，Flutter还允许您使用style参数自定义按钮的外观。您可以调整按钮的形状、颜色、边框和其他属性，使其与应用程序的整体设计相匹配。

ElevatedButton(
  onPressed: () {
    // 回调函数
  },
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
    primary: Colors.blue,
    onPrimary: Colors.white,
  ),
  child: Text('按钮'),
);