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。

相关文章

Spring Security简介、使用与最佳实践

Spring Security简介、使用与最佳实践

《SpringSecurity简介、使用与最佳实践》SpringSecurity是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架,本文给大家介绍SpringSec... 目录一、如何理解 Spring Security？—— 核心思想二、如何在 Java 项目中使用？——
阅读更多...
springboot中使用okhttp3的小结

springboot中使用okhttp3的小结

《springboot中使用okhttp3的小结》OkHttp3是一个JavaHTTP客户端,可以处理各种请求类型,比如GET、POST、PUT等,并且支持高效的HTTP连接池、请求和响应缓存、以及异... 在 Spring Boot 项目中使用 OkHttp3 进行 HTTP 请求是一个高效且流行的方式。
阅读更多...
Java使用Javassist动态生成HelloWorld类

Java使用Javassist动态生成HelloWorld类

《Java使用Javassist动态生成HelloWorld类》Javassist是一个非常强大的字节码操作和定义库,它允许开发者在运行时创建新的类或者修改现有的类,本文将简单介绍如何使用Javass... 目录1. Javassist简介2. 环境准备3. 动态生成HelloWorld类3.1 创建CtC
阅读更多...
使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

《使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解》本文详细介绍了如何使用Python通过ncmdump工具批量将.ncm音频转换为.mp3的步骤,包括安装、配置ffmpeg环... 目录1. 前言2. 安装 ncmdump3. 实现 .ncm 转 .mp34. 执行过程5. 执行结
阅读更多...
Java使用jar命令配置服务器端口的完整指南

Java使用jar命令配置服务器端口的完整指南

《Java使用jar命令配置服务器端口的完整指南》本文将详细介绍如何使用java-jar命令启动应用,并重点讲解如何配置服务器端口,同时提供一个实用的Web工具来简化这一过程,希望对大家有所帮助... 目录1. Java Jar文件简介1.1 什么是Jar文件1.2 创建可执行Jar文件2. 使用java
阅读更多...
C#使用Spire.Doc for .NET实现HTML转Word的高效方案

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1
阅读更多...
Java中的抽象类与abstract 关键字使用详解

Java中的抽象类与abstract 关键字使用详解

《Java中的抽象类与abstract关键字使用详解》：本文主要介绍Java中的抽象类与abstract关键字使用详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、抽象类的概念二、使用 abstract2.1 修饰类 => 抽象类2.2 修饰方法 => 抽象方法，没有
阅读更多...
MyBatis ParameterHandler的具体使用

MyBatis ParameterHandler的具体使用

《MyBatisParameterHandler的具体使用》本文主要介绍了MyBatisParameterHandler的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录一、概述二、源码1 关键属性2.setParameters3.TypeHandler1.TypeHa
阅读更多...
Spring 中的切面与事务结合使用完整示例

Spring 中的切面与事务结合使用完整示例

《Spring中的切面与事务结合使用完整示例》本文给大家介绍Spring中的切面与事务结合使用完整示例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录 一、前置知识：Spring AOP 与 事务的关系 事务本质上就是一个“切面”二、核心组件三、完
阅读更多...
使用docker搭建嵌入式Linux开发环境

使用docker搭建嵌入式Linux开发环境

《使用docker搭建嵌入式Linux开发环境》本文主要介绍了使用docker搭建嵌入式Linux开发环境,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录1、前言2、安装docker3、编写容器管理脚本4、创建容器1、前言在日常开发全志、rk等不同
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2