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。

相关文章

Linux下如何使用C++获取硬件信息

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息：读取"/proc/cpuinfo"文件获取磁盘信息：读取"/proc/diskstats"文
阅读更多...
Java使用SLF4J记录不同级别日志的示例详解

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J
阅读更多...
使用Python实现一个优雅的异步定时器

使用Python实现一个优雅的异步定时器

《使用Python实现一个优雅的异步定时器》在Python中实现定时器功能是一个常见需求,尤其是在需要周期性执行任务的场景下,本文给大家介绍了基于asyncio和threading模块,可扩展的异步定... 目录需求背景代码1. 单例事件循环的实现2. 事件循环的运行与关闭3. 定时器核心逻辑4. 启动与停
阅读更多...
如何使用Nginx配置将80端口重定向到443端口

如何使用Nginx配置将80端口重定向到443端口

《如何使用Nginx配置将80端口重定向到443端口》这篇文章主要为大家详细介绍了如何将Nginx配置为将HTTP（80端口）请求重定向到HTTPS（443端口）,文中的示例代码讲解详细,有需要的小伙... 目录1. 创建或编辑Nginx配置文件2. 配置HTTP重定向到HTTPS3. 配置HTTPS服务器
阅读更多...
Java使用ANTLR4对Lua脚本语法校验详解

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR？第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm
阅读更多...
Java Optional的使用技巧与最佳实践

Java Optional的使用技巧与最佳实践

《JavaOptional的使用技巧与最佳实践》在Java中,Optional是用于优雅处理null的容器类,其核心目标是显式提醒开发者处理空值场景,避免NullPointerExce... 目录一、Optional 的核心用途二、使用技巧与最佳实践三、常见误区与反模式四、替代方案与扩展五、总结在 Java
阅读更多...
使用Java将DOCX文档解析为Markdown文档的代码实现

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown（MD）因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析
阅读更多...
Qt中QUndoView控件的具体使用

Qt中QUndoView控件的具体使用

《Qt中QUndoView控件的具体使用》QUndoView是Qt框架中用于可视化显示QUndoStack内容的控件,本文主要介绍了Qt中QUndoView控件的具体使用,具有一定的参考价值,感兴趣的... 目录引言一、QUndoView 的用途二、工作原理三、 如何与 QUnDOStack 配合使用四、自
阅读更多...
C++使用printf语句实现进制转换的示例代码

C++使用printf语句实现进制转换的示例代码

《C++使用printf语句实现进制转换的示例代码》在C语言中,printf函数可以直接实现部分进制转换功能,通过格式说明符（formatspecifier）快速输出不同进制的数值,下面给大家分享C+... 目录一、printf 原生支持的进制转换1. 十进制、八进制、十六进制转换2. 显示进制前缀3. 指
阅读更多...
使用Python构建一个Hexo博客发布工具

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2