Flutter 中的 MaterialButton 小部件：全面指南

在 Flutter 中，MaterialButton 是 Material Design 风格中的一种按钮，它提供了一种简单而直观的方式来创建符合 Material Design 指南的按钮。MaterialButton 支持多种形状、颜色和大小，并且可以响应用户的点击操作。

基础用法

MaterialButton 最基本的用法是包裹一个文本标签，并提供一个点击事件的回调：

MaterialButton(onPressed: () {// 当按钮被按下时执行的操作},child: Text('Click Me'),
)

自定义样式

MaterialButton 提供了多种属性来定制按钮的外观：

颜色和文本颜色

color: 设置按钮的背景颜色。
textColor: 设置按钮上文本的颜色。

MaterialButton(color: Colors.blue,textColor: Colors.white,onPressed: () {/* ... */},child: Text('Colored Button'),
)

形状

shape: 设置按钮的形状，可以是圆形、矩形或其他自定义形状。

MaterialButton(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),onPressed: () {/* ... */},child: Text('Shaped Button'),
)

大小

MaterialButton 的大小是根据其包裹的 child 小部件的大小自动决定的，但你可以通过 minWidth、height 和 padding 属性来进一步定制：

MaterialButton(minWidth: 100.0,height: 40.0,padding: EdgeInsets.all(8.0),onPressed: () {/* ... */},child: Text('Sized Button'),
)

点击反馈

onPressed: 用户点击按钮时执行的操作。
onLongPress: 用户长按按钮时执行的操作。

MaterialButton(onPressed: () {/* ... */},onLongPress: () {// 用户长按按钮时的操作},child: Text('Press or Long Press Me'),
)

禁用状态

disabledColor: 设置按钮禁用时的颜色。
onDisabled: 按钮禁用时点击事件的回调。

MaterialButton(disabledColor: Colors.grey,onPressed: () {/* ... */},child: Text('Disabled Button'),
)

实例：带图标的按钮

MaterialButton 可以包含图标，以提供更直观的交互提示：

MaterialButton(onPressed: () {/* ... */},child: Icon(Icons.add),
)

实例：凸起按钮

在 Material Design 中，凸起按钮（Raised Buttons）是最常见的按钮样式，它们在按下时会有一个轻微的阴影效果：

MaterialButton(elevation: 8.0, // 设置阴影的高度onPressed: () {/* ... */},child: Text('Raised Button'),
)

实例：平坦按钮

平坦按钮（Flat Buttons）没有阴影，通常用于较少重要的操作或设置在其他组件上：

MaterialButton(color: Colors.blue,textColor: Colors.white,shape: StadiumBorder(), // 使用体育场形状的边框onPressed: () {/* ... */},child: Text('Flat Button'),
)

实例：突出按钮

突出按钮（Outlined Buttons）带有边框但没有背景颜色，它们常用于需要强调的负操作，如取消或删除：

MaterialButton(shape: CircleBorder(),onPressed: () {/* ... */},child: Text('Outlined Button'),textColor: Colors.black,borderSide: BorderSide(color: Colors.black,width: 1.0,),
)