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。

相关文章

使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

《使用sql-research-assistant进行SQL数据库研究的实战指南(代码实现演示)》本文介绍了sql-research-assistant工具,该工具基于LangChain框架,集... 目录技术背景介绍核心原理解析代码实现演示安装和配置项目集成LangSmith 配置（可选）启动服务应用场景
阅读更多...
使用Python快速实现链接转word文档

使用Python快速实现链接转word文档

《使用Python快速实现链接转word文档》这篇文章主要为大家详细介绍了如何使用Python快速实现链接转word文档功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 演示代码展示from newspaper import Articlefrom docx import
阅读更多...
oracle DBMS_SQL.PARSE的使用方法和示例

oracle DBMS_SQL.PARSE的使用方法和示例

《oracleDBMS_SQL.PARSE的使用方法和示例》DBMS_SQL是Oracle数据库中的一个强大包,用于动态构建和执行SQL语句,DBMS_SQL.PARSE过程解析SQL语句或PL/S... 目录语法示例注意事项DBMS_SQL 是 oracle 数据库中的一个强大包，它允许动态地构建和执行
阅读更多...
SpringBoot中使用 ThreadLocal 进行多线程上下文管理及注意事项小结

SpringBoot中使用 ThreadLocal 进行多线程上下文管理及注意事项小结

《SpringBoot中使用ThreadLocal进行多线程上下文管理及注意事项小结》本文详细介绍了ThreadLocal的原理、使用场景和示例代码,并在SpringBoot中使用ThreadLo... 目录前言技术积累1.什么是 ThreadLocal2. ThreadLocal 的原理2.1 线程隔离2
阅读更多...
Python itertools中accumulate函数用法及使用运用详细讲解

Python itertools中accumulate函数用法及使用运用详细讲解

《Pythonitertools中accumulate函数用法及使用运用详细讲解》：本文主要介绍Python的itertools库中的accumulate函数,该函数可以计算累积和或通过指定函数... 目录1.1前言：1.2定义：1.3衍生用法：1.3Leetcode的实际运用:总结 1.1前言：本文将详
阅读更多...
浅析如何使用Swagger生成带权限控制的API文档

浅析如何使用Swagger生成带权限控制的API文档

《浅析如何使用Swagger生成带权限控制的API文档》当涉及到权限控制时,如何生成既安全又详细的API文档就成了一个关键问题,所以这篇文章小编就来和大家好好聊聊如何用Swagger来生成带有... 目录准备工作配置 Swagger权限控制给 API 加上权限注解查看文档注意事项在咱们的开发工作里，API
阅读更多...
Java数字转换工具类NumberUtil的使用

Java数字转换工具类NumberUtil的使用

《Java数字转换工具类NumberUtil的使用》NumberUtil是一个功能强大的Java工具类,用于处理数字的各种操作,包括数值运算、格式化、随机数生成和数值判断,下面就来介绍一下Number... 目录一、NumberUtil类概述二、主要功能介绍1. 数值运算2. 格式化3. 数值判断4. 随机
阅读更多...
Spring排序机制之接口与注解的使用方法

Spring排序机制之接口与注解的使用方法

《Spring排序机制之接口与注解的使用方法》本文介绍了Spring中多种排序机制,包括Ordered接口、PriorityOrdered接口、@Order注解和@Priority注解,提供了详细示例... 目录一、Spring 排序的需求场景二、Spring 中的排序机制1、Ordered 接口2、Pri
阅读更多...
Springboot 中使用Sentinel的详细步骤

Springboot 中使用Sentinel的详细步骤

《Springboot中使用Sentinel的详细步骤》文章介绍了如何在SpringBoot中使用Sentinel进行限流和熔断降级,首先添加依赖,配置Sentinel控制台地址,定义受保护的资源,... 目录步骤 1: 添加 Sentinel 依赖步骤 2: 配置 Sentinel步骤 3: 定义受保护的
阅读更多...
Python中Markdown库的使用示例详解

Python中Markdown库的使用示例详解

《Python中Markdown库的使用示例详解》Markdown库是一个用于处理Markdown文本的Python工具,这篇文章主要为大家详细介绍了Markdown库的具体使用,感兴趣的... 目录一、背景二、什么是 Markdown 库三、如何安装这个库四、库函数使用方法1. markdown.mark
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2