Wigets学习之Button
时间：2021-06-25 01:33:40
Material提供了多种按钮：
TextButton：文本按钮OutlinedButton：边框按钮IconButton：图标按钮FloatingActionButton：悬浮按钮MaterialButton：Material风格按钮ElevatedButton：凸起按钮ButtonBar：按钮组DropdownButton：下拉框按钮BackButton：返回按钮CloseButton：关闭按钮
TextButton：文本按钮
显示一个可点击的文本
child：显示的内容(必填)onPressed：点击事件(必填，可以为 null)onLongPress：长按事件style: 按钮样式，使用ButtonStyle设置autofocus：是否自动聚焦，默认为false
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
textDirection: TextDirection.ltr,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Directionality(
textDirection: TextDirection.ltr,
child: TextButton(
onLongPress: () {
print('长按事件');
},
onPressed: () {
print('点击事件');
},
child: Text(
'文本按钮',
textDirection: TextDirection.ltr,
)))
],
);
}
}
OutlinedButton：边框按钮
带有边框的按钮
属性和TextButton一致，通过OutlinedButton.styleFrom来设置边框等样式
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Directionality(
textDirection: TextDirection.ltr,
child: OutlinedButton(
onPressed: () {
print('点击事件');
},
style: OutlinedButton.styleFrom(
backgroundColor: Colors.blue,
side: BorderSide(width: 1, color: Colors.red)),
child: Text(
"边框按钮",
style: TextStyle(color: Colors.white),
textDirection: TextDirection.ltr,
),
),
),
);
}
}
IconButton：图标按钮
图标按钮
icon：图标onPressed：点击事件(必填)iconSize：图标大小，默认为24padding：内边距alignment：对齐方式splashRadius：点击的水波纹大小color：图标颜色focusColor：焦点聚集时背景颜色hoverColor：悬停时背景颜色highlightColor：水波纹高亮颜色splashColor：水波纹颜色disabledColor：禁用时颜色
注意：
IconButton需要用Material Widget包裹，否则会报错。
除了使用IconButton可以实现图标按钮还可以使用TextButton.icon()、OutlinedButton.icon()、ElevatedButton.icon()实现图标按钮
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
child: Row(
textDirection: TextDirection.ltr,
children: [
Directionality(
textDirection: TextDirection.ltr,
child: IconButton(
icon: Icon(Icons.search),
onPressed: () {
print('点击事件');
})),
Directionality(
textDirection: TextDirection.ltr,
child: TextButton.icon(
onPressed: () {
print('点击事件');
},
icon: Icon(Icons.add),
label: Text("添加"))),
Directionality(
textDirection: TextDirection.ltr,
child: OutlinedButton.icon(
onPressed: () {
print('点击事件');
},
icon: Icon(Icons.online_prediction_rounded),
label: Text("测试"))),
Directionality(
textDirection: TextDirection.ltr,
child: ElevatedButton.icon(
onPressed: () {
print('点击事件');
},
icon: Icon(Icons.access_time_sharp),
label: Text("时间")))
],
),
);
}
}
FloatingActionButton：悬浮按钮
显示一个悬停的按钮
onPressed：点击事件(必填)child：按钮显示的内容tooltip：提示信息foregroundColor：内容颜色backgroundColor：背景色focusColor：焦点聚集时背景颜色hoverColor：悬停时背景颜色splashColor：按下抬起时背景颜色elevation：阴影focusElevation：焦点聚集时阴影hoverElevation：悬停时阴影highlightElevation：按下时阴影disabledElevation：禁用时阴影mini：是否为小型按钮，默认为false
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
print('点击事件');
},
tooltip: '提示信息',
foregroundColor: Colors.black,
backgroundColor: Colors.yellow,
elevation: 4.0,
),
),
);
}
}
MaterialButton：Material风格按钮
显示一个
Material风格的按钮
onPressed：点击事件(必填)child：显示内容onLongPress：长按事件textTheme：内容主题设置textColor：内容颜色disabledTextColor：禁用时内容颜色color：背景色disabledColor：禁用时背景色focusColor：焦点聚集时背景色hoverColor：悬停时背景色highlightColor：水波纹高亮颜色splashColor：水波纹颜色colorBrightness：主题风格，Brightness.light：浅色主题，Brightness.dark：黑色主题elevation：阴影focusElevation：焦点聚集时阴影hoverElevation：悬停时阴影highlightElevation：按下时阴影disabledElevation：禁用时阴影padding：内边距minWidth：最小宽度height：高度
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Directionality(
textDirection: TextDirection.ltr,
child: MaterialButton(
onPressed: () {
print('点击事件');
},
onLongPress: () {
print('长按事件');
},
textColor: Colors.white,
color: Colors.blue,
highlightColor: Colors.blue.shade100,
splashColor: Colors.red,
elevation: 16.0,
child: Text(
'测试',
textDirection: TextDirection.ltr,
),
),
),
),
),
);
}
}
ElevatedButton：凸起按钮
显示有阴影的按钮，好像凸起一样
onPressed：点击事件(必填)child：显示内容(必填)onLongPress：长按事件style：样式
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Directionality(
textDirection: TextDirection.ltr,
child: ElevatedButton(
onPressed: () {
print('点击事件');
},
onLongPress: () {
print('长按事件');
},
child: Text(
"漂浮按钮",
textDirection: TextDirection.ltr,
),
)),
),
),
);
}
}
ButtonBar：按钮组
用于展示一组按钮
children：按钮列表alignment：对齐方式buttonTextTheme：按钮内容主题buttonMinWidth：按钮最小宽度buttonHeight：按钮高度buttonPadding：按钮内边距
DropdownButton：下拉框按钮
显示下拉框的按钮
items：下拉选项(必填)selectedItemBuilder：选项构造器value：当前选中的值hint：没有选中值的时候默认显示的内容disabledHint：禁用时显示的内容onChange：选项改变事件onTap：点击事件elevation：阴影，默认为 8style：样式underline：下划线,如果不想要下划线，最简单的做法就是underline: Container()icon：图标iconDisabledColor：不可用时图标颜色iconEnabledColor：可用时图标颜色iconSize：图标大小，默认为 24itemHeight：选项高度dropdownColor：下拉容器的背景色
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Home();
}
}
class Home extends StatefulWidget {
Home({Key? key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
int _val = 1;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: DropdownButton(
value: _val,
onChanged: (int? val) {
setState(() {
_val = val!;
});
},
hint: Text("请选择"),
style: TextStyle(color: Colors.blue),
underline: Container(),
icon: Icon(Icons.arrow_circle_down),
iconEnabledColor: Colors.cyan,
itemHeight: 60,
dropdownColor: Colors.black,
items: [
DropdownMenuItem(
child: Text('选项1'),
value: 1,
),
DropdownMenuItem(
child: Text('选项2'),
value: 2,
),
DropdownMenuItem(
child: Text('选项3'),
value: 3,
),
],
),
),
),
);
}
}
BackButton：返回按钮
用于返回上一页的按钮，本身就是一个
IconButton，默认点击事件是Navigator.maybePop，即：如果有上一页则返回上一页。
color：按钮颜色onPressed：点击事件
CloseButton：关闭按钮
用于关闭的按钮，本身就是一个
IconButton，默认点击事件是Navigator.maybePop，即：如果有上一页则返回上一页。BackButton用于全屏的页面，而CloseButton用于弹窗。
color：按钮颜色onPressed：点击事件