Flutter Button使用

2024-09-09 03:52
文章标签 使用 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');},

相关属性

textStyle             字体样式
backgroundColor       背景色
foregroundColor       字体颜色
overlayColor          高亮色，按钮处于focused, hovered,  pressed时的颜色
shadowColor           阴影颜色
elevation             阴影值
padding               padding
minimumSize           最小尺寸
side                  边框
shape                 形状
mouseCursor           鼠标指针的光标进入或者悬停在此按钮上
visualDensity         按钮布局的紧凑程度
tapTargetSize         响应触摸的区域
animationDuration     [shape]和[elevation]的动画更改的持续时间。
enableFeedback        检测到的手势是否应提供声音和/或触觉反馈。

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

  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,)))),

这篇关于Flutter Button使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1150080。

相关文章

Python 字典 (Dictionary)使用详解

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,：本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典
阅读更多...
使用Python构建一个高效的日志处理系统

使用Python构建一个高效的日志处理系统

《使用Python构建一个高效的日志处理系统》这篇文章主要为大家详细讲解了如何使用Python开发一个专业的日志分析工具,能够自动化处理、分析和可视化各类日志文件,大幅提升运维效率,需要的可以了解下... 目录环境准备工具功能概述完整代码实现代码深度解析1. 类设计与初始化2. 日志解析核心逻辑3. 文件处
阅读更多...
一文详解如何使用Java获取PDF页面信息

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸（宽高）四、获取页面旋转角度五、判断
阅读更多...
C++中assign函数的使用

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)
阅读更多...
Spring StateMachine实现状态机使用示例详解

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​，用于描述对象在其生命
阅读更多...
使用Python删除Excel中的行列和单元格示例详解

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定
阅读更多...
深入理解Go语言中二维切片的使用

深入理解Go语言中二维切片的使用

《深入理解Go语言中二维切片的使用》本文深入讲解了Go语言中二维切片的概念与应用,用于表示矩阵、表格等二维数据结构,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录引言二维切片的基本概念定义创建二维切片二维切片的操作访问元素修改元素遍历二维切片二维切片的动态调整追加行动态
阅读更多...
prometheus如何使用pushgateway监控网路丢包

prometheus如何使用pushgateway监控网路丢包

《prometheus如何使用pushgateway监控网路丢包》：本文主要介绍prometheus如何使用pushgateway监控网路丢包问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录监控网路丢包脚本数据图表总结监控网路丢包脚本[root@gtcq-gt-monitor-prome
阅读更多...
Python通用唯一标识符模块uuid使用案例详解

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数
阅读更多...
SpringBoot中如何使用Assert进行断言校验

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2