文章目录
前言
Flutter 里有多种 Button 按钮组件：
- ElevatedButton ： "漂浮"按钮
- TextButton ：文本按钮
- OutlinedButton ：线框按钮
- IconButton ：图标按钮
- ButtonBar ：按钮组
- FloatingActionButton ：浮动按钮
属性
按钮（Button）有以下常用属性：
- onPressed ：必填参数，按下按钮时触发的回调，接收一个方法，传 null 表示按钮禁用，会显示禁用相关样式
- child ：可以放入Widget
- textColor ：文本颜色
- color ：文本颜色
- disabledColor ：按钮禁用时的颜色
- disabledTextColor ：按钮禁用时的文本颜色
- splashColor ：点击按钮时水波纹的颜色
- highlightColor ：点击（长按）按钮后按钮的颜色
- elevation ：阴影的范围，值越大阴影范围越大
- padding ：内边距
- shape ：设置按钮的形状
1. ElevatedButton
ElevatedButton 即"漂浮"按钮，它默认带有阴影和灰色背景。按下后，阴影会变大。
- 代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('按钮(Button)'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text("1.ElevatedButton",
textScaleFactor: 1.2,
),
ElevatedButton(
child: Text("漂浮按钮"),
onPressed: () {
print("Clicked me");
},
)
],
)
)
);
}
}
- 效果图
2. TextButton
TextButton 即文本按钮，默认背景透明并不带阴影。按下后，会有背景色。
- 代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('按钮(Button)'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text("2.TextButton",
textScaleFactor: 1.2,
),
TextButton(
child: Text("文本按钮"),
onPressed: () {
print("Clicked me");
},
),
],
)
)
);
}
}
- 效果图
3. OutlinedButton
OutlinedButton 默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)
- 代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('按钮(Button)'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text("3.OutlinedButton",
textScaleFactor: 1.2,
),
OutlinedButton(
child: Text("线框按钮"),
onPressed: () {
print("Clicked me");
},
),
],
)
)
);
}
}
- 效果图
4. IconButton
IconButton 是一个可点击的 Icon，不包括文字，默认没有背景，点击后会出现背景
- 代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('按钮(Button)'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text("4.IconButton",
textScaleFactor: 1.2,
),
IconButton(
icon:Icon(Icons.add_a_photo),
onPressed: () {
print("Clicked me");
},
),
],
)
)
);
}
}
- 效果图
5. ButtonBar
ButtonBar，它里面可以放多个 Button，ButtonBar 可以给里面的 button 做统一样式处理。
- 代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('按钮(Button)'),
),
body: Container(
color: Colors.green,
width: 450,
child: ButtonBar(
buttonPadding: EdgeInsets.all(5),
buttonHeight: 30,
alignment: MainAxisAlignment.spaceBetween,
buttonTextTheme: ButtonTextTheme.primary,
layoutBehavior: ButtonBarLayoutBehavior.padded,
children:[
ElevatedButton.icon(
icon: Icon(Icons.send),
label: Text("发送"),
onPressed: () {
print("Clicked me");
},
),
ElevatedButton.icon(
icon: Icon(Icons.home),
label: Text("首页"),
onPressed: () {
print("Clicked me");
},
),
ElevatedButton.icon(
icon: Icon(Icons.shop),
label: Text("购物"),
onPressed: () {
print("Clicked me");
},
),
],
),
)
)
);
}
}
- 效果图
6. FloatingActionButton
一个 material design的浮动按钮。 浮动操作按钮是一个圆形图标按钮，它悬停在内容上以提升应用程序中的主要操作。 浮动操作按钮最常用于[Scaffold.floatingActionButton] 场景。
- 代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('按钮(Button)'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text("6.FloatingActionButton",
textScaleFactor: 1.2,
),
FloatingActionButton(
child: Icon(Icons.access_alarm_rounded),
onPressed: () {
print("Clicked me");
},
),
],
)
)
);
}
}
- 效果图
