Flutter Button使用

本文主要是介绍Flutter Button使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Material 组件库中有多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们的父类是于ButtonStyleButton。

基本的按钮特点：

1.按下时都会有“水波文动画”。
2.onPressed属性设置点击回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。

ElevatedButton

简单实现

  const ElevatedButton({super.key,required super.onPressed,super.onLongPress,super.onHover,super.onFocusChange,super.style,super.focusNode,super.autofocus = false,super.clipBehavior,super.statesController,required super.child,super.iconAlignment,});

import 'package:flutter/material.dart';class ButtonWidgetPage extends StatelessWidget {const ButtonWidgetPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Button Demo"),),body: Container(alignment: Alignment.center,margin: const EdgeInsets.all(10),child: Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text("TEST Button"),ElevatedButton(onPressed: () {print('ElevatedButton clicked');},child: Text("Click ElevatedButton"),style: ElevatedButton.styleFrom(backgroundColor: Colors.blue,foregroundColor: Colors.white,elevation: 10,minimumSize: Size(150, 50),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))),)],),),);}
}

对上面的属性做简单介绍：

child: Text("Click ElevatedButton")设置按钮显示的文本为“Click ElevatedButton”。
onPressed：设置按钮点击事件。
style：使用ElevatedButton.styleFrom方法设置按钮的样式，包括背景色、文本颜色、阴影效果、最小宽度和形状等。

2024-09-07 15:44:54.993 12985-13050 flutter       I  ElevatedButton clicked
2024-09-07 15:44:56.418 12985-13050 flutter       I  ElevatedButton clicked
2024-09-07 15:44:57.601 12985-13050 flutter       I  ElevatedButton clicked
2024-09-07 15:44:58.044 12985-13050 flutter       I  ElevatedButton clicked
2024-09-07 15:47:37.981 12985-13050 flutter       I  ElevatedButton clicked

  static ButtonStyle styleFrom({Color? foregroundColor,Color? backgroundColor,Color? disabledForegroundColor,Color? disabledBackgroundColor,Color? shadowColor,Color? surfaceTintColor,Color? iconColor,Color? disabledIconColor,Color? overlayColor,double? elevation,TextStyle? textStyle,EdgeInsetsGeometry? padding,Size? minimumSize,Size? fixedSize,Size? maximumSize,BorderSide? side,OutlinedBorder? shape,MouseCursor? enabledMouseCursor,MouseCursor? disabledMouseCursor,VisualDensity? visualDensity,MaterialTapTargetSize? tapTargetSize,Duration? animationDuration,bool? enableFeedback,AlignmentGeometry? alignment,InteractiveInkFeatureFactory? splashFactory,ButtonLayerBuilder? backgroundBuilder,ButtonLayerBuilder? foregroundBuilder,})

去除去掉ElevatedButton边距

import 'package:flutter/material.dart';class ButtonWidgetPage extends StatelessWidget {const ButtonWidgetPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Button Demo"),),body: Container(alignment: Alignment.center,margin: const EdgeInsets.all(10),child: Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text("TEST Button"),ElevatedButton(onPressed: () {print('ElevatedButton clicked');},child: Text("Click ElevatedButton"),style: ElevatedButton.styleFrom(backgroundColor: Colors.blue,foregroundColor: Colors.white,elevation: 10,minimumSize: Size.zero,padding: EdgeInsets.zero,tapTargetSize: MaterialTapTargetSize.shrinkWrap,))],),),);}
}

水平填充满

import 'package:flutter/material.dart';class ButtonWidgetPage extends StatelessWidget {const ButtonWidgetPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Button Demo"),),body: Container(alignment: Alignment.center,margin: const EdgeInsets.all(10),child: Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text("TEST Button"),ElevatedButton(onPressed: () {print('ElevatedButton clicked');},child: Text("Click ElevatedButton"),style: ElevatedButton.styleFrom(backgroundColor: Colors.blue,foregroundColor: Colors.white,elevation: 10,minimumSize: Size(double.infinity, 50),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))),)],),),);}
}

TextButton

  const TextButton({super.key,required super.onPressed,super.onLongPress,super.onHover,super.onFocusChange,super.style,super.focusNode,super.autofocus = false,super.clipBehavior,super.statesController,super.isSemanticButton,required Widget super.child,super.iconAlignment,});

简单实现

import 'package:flutter/material.dart';class ButtonWidgetPage extends StatelessWidget {const ButtonWidgetPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Button Demo"),),body: Container(alignment: Alignment.center,margin: const EdgeInsets.all(10),child: Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text("TEST Button"),TextButton(onPressed: () {print('TextButton clicked');},autofocus: false,style: ButtonStyle(textStyle: WidgetStateProperty.all(TextStyle(fontSize: 20, color: Colors.red))),child: Text("Click TextButton"))],),),);}
}

注意：上面通过 textStyle: WidgetStateProperty.all(TextStyle(fontSize: 20, color: Colors.red))来设置按钮字体颜色是无效的，发现颜色还是蓝色，而不是红色。

通过foregroundColor:WidgetStateProperty.all(Colors.yellow))才会生效。

import 'package:flutter/material.dart';class ButtonWidgetPage extends StatelessWidget {const ButtonWidgetPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Button Demo"),),body: Container(alignment: Alignment.center,margin: const EdgeInsets.all(10),child: Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text("TEST Button"),TextButton(onPressed: () {print('TextButton clicked');},autofocus: false,style: ButtonStyle(textStyle: WidgetStateProperty.all(TextStyle(fontSize: 20, color: Colors.red)),foregroundColor:WidgetStateProperty.all(Colors.yellow)),child: Text("Click TextButton"))],),),);}
}

设置按钮按下时，获取焦点时、默认状态时的颜色


import 'package:flutter/material.dart';class ButtonWidgetPage extends StatelessWidget {const ButtonWidgetPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Button Demo"),),body: Container(alignment: Alignment.center,margin: const EdgeInsets.all(10),child: Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text("TEST Button"),TextButton(onPressed: () {print('TextButton clicked');},autofocus: false,style: ButtonStyle(textStyle: WidgetStateProperty.all(const TextStyle(fontSize: 20, color: Colors.red)),foregroundColor: WidgetStateProperty.resolveWith((states) {if (states.contains(MaterialState.focused) &&!states.contains(MaterialState.pressed)) {//获取焦点时的颜色return Colors.blue;} else if (states.contains(MaterialState.pressed)) {//按下时的颜色return Colors.yellow;}//默认状态使用灰色return Colors.black;},),),// foregroundColor://     WidgetStateProperty.all(Colors.yellow)),child: Text("Click TextButton"))],),),);

设置背景颜色 backgroundColor

import 'package:flutter/material.dart';class ButtonWidgetPage extends StatelessWidget {const ButtonWidgetPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Button Demo"),),body: Container(alignment: Alignment.center,margin: const EdgeInsets.all(10),child: Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text("TEST Button"),TextButton(onPressed: () {print('TextButton clicked');},autofocus: false,style: ButtonStyle(textStyle: WidgetStateProperty.all(const TextStyle(fontSize: 20, color: Colors.red)),foregroundColor: WidgetStateProperty.resolveWith((states) {if (states.contains(MaterialState.focused) &&!states.contains(MaterialState.pressed)) {return Colors.blue;} else if (states.contains(MaterialState.pressed)) {return Colors.yellow;}return Colors.black;},),backgroundColor: WidgetStateProperty.resolveWith((states) {if (states.contains(WidgetState.pressed)) {return Colors.red;}return null;}),),// foregroundColor://     WidgetStateProperty.all(Colors.yellow)),child: Text("Click TextButton"))],),)

其他设置

overlayColor: 设置水波纹颜色。
padding: 设置按钮内边距。
minimumSize: 设置按钮的大小。
side: 设置边框。
shape: 外边框装饰会覆盖 side 配置的样式

class ButtonWidgetPage extends StatelessWidget {const ButtonWidgetPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Button Demo"),),body: Container(alignment: Alignment.center,margin: const EdgeInsets.all(10),child: Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text("TEST Button"),TextButton(onPressed: () {print('TextButton clicked');},autofocus: false,style: ButtonStyle(textStyle: WidgetStateProperty.all(const TextStyle(fontSize: 20, color: Colors.red)),foregroundColor: WidgetStateProperty.resolveWith((states) {if (states.contains(MaterialState.focused) &&!states.contains(MaterialState.pressed)) {return Colors.blue;} else if (states.contains(MaterialState.pressed)) {return Colors.yellow;}return Colors.black;},),backgroundColor: WidgetStateProperty.resolveWith((states) {if (states.contains(WidgetState.pressed)) {return Colors.red;}return null;}),overlayColor: WidgetStateProperty.all(Colors.red),padding: WidgetStateProperty.all(EdgeInsets.all(10)),minimumSize: WidgetStateProperty.all(Size(300, 100)),side: WidgetStateProperty.all(BorderSide(color: Colors.blue, width: 1)),shape: WidgetStateProperty.all(StadiumBorder()),),// foregroundColor://     WidgetStateProperty.all(Colors.yellow)),child: Text("Click TextButton"))],),),);}
}

OutlinedButton

  const OutlinedButton({super.key,required super.onPressed,super.onLongPress,super.onHover,super.onFocusChange,super.style,super.focusNode,super.autofocus = false,super.clipBehavior,super.statesController,required super.child,super.iconAlignment,});

简单实现

class ButtonWidgetPage extends StatelessWidget {const ButtonWidgetPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Button Demo"),),body: Container(alignment: Alignment.center,margin: const EdgeInsets.all(10),child: Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text("TEST Button"),OutlinedButton(onPressed: () {print('OutlinedButton clicked');},child: Text('Click OutlinedButton'))],),),);}
}

2024-09-08 11:03:01.333  4839-4871  flutter             I  OutlinedButton clicked
2024-09-08 11:03:02.027  4839-4871  flutter             I  OutlinedButton clicked
2024-09-08 11:03:02.352  4839-4871  flutter             I  OutlinedButton clicked
2024-09-08 11:03:02.547  4839-4871  flutter             I  OutlinedButton clicked
2024-09-08 11:03:02.709  4839-4871  flutter             I  OutlinedButton clicked
2024-09-08 11:03:40.339  4839-4871  flutter             I  OutlinedButton clicked

长按事件

                onLongPress: () {print('OutlinedButton onLongPress');},

设置字体大小（注意：这里设置颜色不会生效）

  style: ButtonStyle(textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30))),

backgroundColor 背景色

style: ButtonStyle(textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30)),backgroundColor: WidgetStateProperty.all(Colors.red),
)

foregroundColor 字体颜色

             style: ButtonStyle(textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30)),backgroundColor: WidgetStateProperty.all(Colors.red),foregroundColor: WidgetStateProperty.all(Colors.yellow),),

overlayColor 高亮色，按钮处于focused, hovered, pressed时的颜色

style: ButtonStyle(textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30)),backgroundColor: WidgetStateProperty.all(Colors.red),foregroundColor: WidgetStateProperty.all(Colors.yellow),overlayColor: WidgetStateProperty.all(Colors.blue),
)

side 边框

         style: ButtonStyle(textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30)),backgroundColor: WidgetStateProperty.all(Colors.red),foregroundColor: WidgetStateProperty.all(Colors.yellow),overlayColor: WidgetStateProperty.all(Colors.blue),side: WidgetStateProperty.all(BorderSide(width: 1,color: Colors.green)),)

shadowColor 阴影颜色 & elevation 阴影值

style: ButtonStyle(textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30)),backgroundColor: WidgetStateProperty.all(Colors.red),foregroundColor: WidgetStateProperty.all(Colors.yellow),overlayColor: WidgetStateProperty.all(Colors.blue),side: WidgetStateProperty.all(BorderSide(width: 1, color: Colors.green)),shadowColor: WidgetStateProperty.all(Colors.black),elevation: WidgetStateProperty.all(10),
)

shape 形状

棱形

style: ButtonStyle(textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30)),backgroundColor: WidgetStateProperty.all(Colors.red),foregroundColor: WidgetStateProperty.all(Colors.yellow),overlayColor: WidgetStateProperty.all(Colors.blue),side: WidgetStateProperty.all(BorderSide(width: 1, color: Colors.green)),shadowColor: WidgetStateProperty.all(Colors.black),elevation: WidgetStateProperty.all(10),shape: WidgetStateProperty.all(BeveledRectangleBorder(borderRadius: BorderRadius.circular(10))),
)

圆角弧度

 style: ButtonStyle(textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30)),backgroundColor: WidgetStateProperty.all(Colors.red),foregroundColor: WidgetStateProperty.all(Colors.yellow),overlayColor: WidgetStateProperty.all(Colors.blue),side: WidgetStateProperty.all(BorderSide(width: 1, color: Colors.green)),shadowColor: WidgetStateProperty.all(Colors.black),elevation: WidgetStateProperty.all(10),//shape: WidgetStateProperty.all(BeveledRectangleBorder(borderRadius: BorderRadius.circular(10))),shape: WidgetStateProperty.all(StadiumBorder(side: BorderSide(style: BorderStyle.solid,color: Colors.blue,)))),