Flutter 中 ElevatedButton

在Flutter中，ElevatedButton是一个常用的按钮控件，用于在应用程序中创建一个凸起的按钮，通常用于触发用户交互操作。

以下是一个简单的示例代码，演示如何在Flutter应用中使用ElevatedButton控件：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ElevatedButton Example'),
        ),
        body: Center(
          child: ElevatedButton(
            // 设置按钮文本
            child: Text('Click Me'),
            // 设置按钮点击事件处理函数
            onPressed: () {
              // 处理按钮点击事件
              print('Button clicked');
            },
            // 设置按钮样式
            style: ElevatedButton.styleFrom(
              // 设置按钮背景色
              primary: Colors.blue,
              // 设置按钮文本颜色
              onPrimary: Colors.white,
              // 设置按钮阴影效果
              elevation: 5,
              // 设置按钮的最小宽度
              minimumSize: Size(150, 50),
              // 设置按钮的形状
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，包含一个带有标题的AppBar和一个居中显示的ElevatedButton控件。ElevatedButton的属性被设置如下：

• child：设置按钮显示的文本为“Click Me”。
• onPressed：设置按钮点击事件的处理函数，当按钮被点击时，会执行print('Button clicked')语句。
• style：使用ElevatedButton.styleFrom方法设置按钮的样式，包括背景色、文本颜色、阴影效果、最小宽度和形状等。

除了示例中提到的属性之外，ElevatedButton还有其他属性可用于进一步定制按钮的外观和行为，例如onLongPress用于设置长按按钮时的处理函数，padding用于设置按钮的内边距，enabled用于设置按钮是否可用等。ElevatedButton非常灵活，可以根据应用程序的需要进行定制。