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;Widget 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;Widget 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("漂浮按钮"),)],),),);}
}
- 效果图：
