Flutter按钮控件（六）

1、常见按钮

import 'package:flutter/material.dart';void main() {runApp(const MaterialApp(home: MyHomePage(title: "按钮控件"),));
}class MyHomePage extends StatelessWidget {const MyHomePage({super.key, required this.title});final String title;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Center(child: Text(title),),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton(onPressed: () {},child: const Text("ElevatedButton"),),// 在按钮之间添加一个高度为20的盒子，将按钮分开适当距离const SizedBox(height: 20),TextButton(onPressed: () {},child: const Text("TextButton"),),const SizedBox(height: 20),FloatingActionButton(onPressed: () {},child: const Icon(Icons.account_circle),),const SizedBox(height: 20),OutlinedButton(onPressed: () {},child: const Text("OutlinedButton"),),const SizedBox(height: 20),IconButton(onPressed: () {},icon: const Icon(Icons.access_alarms_sharp),),],),),);}
}

• ElevatedButton：具有默认样式（如阴影、圆角等）的实心按钮；

• TextButton：简单的文本按钮，通常用于对话框或底部表单等位置；

• OutlinedButton：与 ElevatedButton 类似，但是没有背景色，只有边框；

• IconButton：使用图标而不是文本的按钮；

• FloatingActionButton：用于主要的操作，显示为悬浮在屏幕上的圆形按钮；

• 效果图：

2、自定义按钮样式

以ElevatedButton为例，自定义一些常见属性，具体属性查看文档：https://api.flutter.dev/flutter/material/ElevatedButton-class.html

import 'package:flutter/material.dart';void main() {runApp(const MaterialApp(home: MyHomePage(title: "按钮控件"),));
}class MyHomePage extends StatelessWidget {const MyHomePage({super.key, required this.title});final String title;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Center(child: Text(title),),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton(onPressed: () {},style: ElevatedButton.styleFrom(// 修改文本颜色，也可以直接修改文本颜色foregroundColor: Colors.blue,// 按钮的背景色backgroundColor: Colors.yellow,// 点击按钮波纹反馈的颜色overlayColor: Colors.grey,// 按钮阴影颜色shadowColor: Colors.red,// 设置按钮圆角shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),),child: const Text("漂浮按钮"),)],),),);}
}

• 效果图：