【Flutter】关于Button 的那些知识ElevatedButton等，以及Buttonstyle

news2025/10/31 12:04:45

文章目录

  • 前言
  • 一、Button是什么？
  • 二、开始使用button
    • 1.ElevatedButton
      • 1.无style 的ElevatedButton
      • 2.基础功能的处理之后的button
      • 3.利用buttonstyle 来美化下button
    • 2.IconButton，TextButton基础功能都是一样的
  • 三、做几个好看点的按键
  • 总结

在这里插入图片描述

前言

一、Button是什么？

按键，在flutter 中，有很多已经内置的button，合理的利用可以快速的开发，
但是ElevatedButton中，有一个Buttonstyle，配合起来可以创建自己需要的按钮样式，但是其实个人感觉运用起来有些复杂。

二、开始使用button

在一个app 中，肯定会出现按键widget的，这个也是运用很多的情况。

1.ElevatedButton

参数说明
super.keykey
required super.onPressed点击函数
super.onLongPress长按的处理
super.onHover鼠标悬停的时候处理的时间
super.onFocusChange焦点改变
super.stylebuttonstyle
super.focusNode–
super.autofocus = false,–
super.clipBehavior = Clip.none抗锯齿功能
super.statesController可以监听和控制按钮的状态改变，然后做处理
required super.childwidget

1.无style 的ElevatedButton

代码如下（示例）：

 ElevatedButton(
   onPressed: () {},
   child: const Text('ElevatedButton'),

在这里插入图片描述

2.基础功能的处理之后的button

鼠标悬停在按钮上面就改变颜色

      ElevatedButton(
              onPressed: () {
                debugPrint("I AM CLICK HERE");
              },
              onLongPress: () {
                debugPrint('I AM LONGPRESS');
              },
              //按钮的状态控制器，少用到
              // statesController: ,
              //抗锯齿功能
              clipBehavior: Clip.antiAlias,
              //焦点处理，使用不多
              focusNode: FocusNode(),
              //鼠标悬停的处理，一般在win 和mac的软件的时候处理
              onHover: (inhover) {
                if (inhover) {
                  _color = Colors.green;
                } else {
                  _color = Colors.red;
                }
                setState(() {});
              },
              child: Text(
                'ElevatedButton',
                style: TextStyle(color: _color),
              ),
            )

在这里插入图片描述

3.利用buttonstyle 来美化下button

参数说明
this.textStyle文本样式
this.backgroundColor背景颜色
this.foregroundColor
this.overlayColor
this.shadowColor
this.surfaceTintColor
this.elevation
this.padding
this.minimumSize
this.fixedSize
this.maximumSize
this.side
this.shape
this.mouseCursor
this.visualDensity
this.tapTargetSize
this.animationDuration
this.enableFeedback
this.alignment
this.splashFactory

【Flutter】shape 属性 ShapeBorder，形状
在这里插入图片描述

    ElevatedButton(
              onPressed: () {
                debugPrint("I AM CLICK HERE");
              },
              onLongPress: () {
                debugPrint('I AM LONGPRESS');
              },
              //按钮的状态控制器，少用到
              // statesController: ,
              //抗锯齿功能
              clipBehavior: Clip.antiAlias,
            
              //焦点处理，使用不多
              focusNode: FocusNode(),
              style: ButtonStyle(
                  //背景颜色
                  backgroundColor: MaterialStateProperty.all(Colors.indigo),
                  //字体颜色
                  foregroundColor: MaterialStateProperty.all(Colors.white),
                  // 鼠标悬停的时候背景颜色
                  overlayColor: MaterialStateProperty.all(Colors.red),
                  //影音的颜色
                  shadowColor: MaterialStateProperty.all(Colors.yellow),
                  //表面颜色
                  surfaceTintColor: MaterialStateProperty.all(Colors.pink),
                  // 阴影值
                  elevation: MaterialStateProperty.all(10),
                  //内边距，文本同按钮边框的距离
                  // padding: MaterialStateProperty.all(const EdgeInsets.all(5)),
                  //最小值，尺寸不能再小于这个了
                  // minimumSize: MaterialStateProperty.all(const Size(10, 10)),
                  //边框的颜色和厚度
                  side: MaterialStateProperty.all(
                      const BorderSide(color: Colors.pink, width: 1.0)),
                  //形状
                  shape: MaterialStateProperty.all(
                    const BeveledRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(15)),
                        side: BorderSide(color: Colors.green, width: 1)),
                  ),
                  //鼠标的样式，当悬停的时候，鼠标要显示为什么样的样式，比如下面的鼠标就会显示为等待加载的样式
                  mouseCursor:
                      MaterialStateProperty.all(SystemMouseCursors.wait),
                  //视觉密度，就是按钮的紧凑性
                  visualDensity: VisualDensity.compact,
                  //触控区域,少用
                  tapTargetSize: MaterialTapTargetSize.padded,
                  //shap,eleation 改变的动画时间
                  animationDuration: const Duration(seconds: 1),
                  //检测到的手势是否应提供声学和/或触觉反馈。例如，在Android上，当启用反馈时，轻敲会产生咔哒声，长按会产生短暂的振动。
                  enableFeedback: true,
                  //child的位置，
                  alignment: Alignment.center,
                  //水波纹
                  splashFactory: InkRipple.splashFactory,
                  //字体样式
                  textStyle: MaterialStateProperty.all(
                      const TextStyle(fontWeight: FontWeight.bold))),

              child: const Text(
                'ElevatedButton',
              ),
            )

在这里插入图片描述

2.IconButton，TextButton基础功能都是一样的

带图标的按键：buttonstyle 同上面的说明是一样的；
isSelected: isSelect,//需要在themedata 里面设置useMaterial3: true

         IconButton(
              icon: const Icon(Icons.arrow_drop_down),
              isSelected: isSelect,//需要在themedata 里面设置useMaterial3: true
              selectedIcon: const Icon(Icons.arrow_drop_up),
              onPressed: () {
                isSelect = !isSelect;
                setState(() {});
              },
            ),

在这里插入图片描述

            IconButton(
                onPressed: () {
                  print("Pressed");

                  setState(() {});
                },

                // splashRadius: 0.2,
                splashColor: Colors.red,
                focusColor: Colors.indigo,
                hoverColor: Colors.yellow,
                highlightColor: Colors.purple,
                disabledColor: Colors.teal,
                // mouseCursor: SystemMouseCursors.allScroll,
                //尺寸限制
                // constraints:BoxConstraints() ,
                tooltip: 'this is a iconbutton',
                isSelected: true,
                selectedIcon: Icon(Icons.favorite),
                icon: Icon(Icons.adb_sharp))

在这里插入图片描述

三、做几个好看点的按键

     ElevatedButton(
                onPressed: () {},
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.teal),
                    shadowColor: MaterialStateProperty.all(Colors.yellowAccent),
                    elevation: MaterialStateProperty.all(10)),
                child: const Text(
                  '开始',
                  style: TextStyle(color: Colors.white),
                )),
            ElevatedButton(
                onPressed: () {},
                clipBehavior: Clip.antiAlias,
                style: ButtonStyle(
                    shape: MaterialStateProperty.all(const CircleBorder(
                        side: BorderSide(width: 1, color: Colors.pink))),
                    padding:
                        MaterialStateProperty.all(const EdgeInsets.all(10)),
                    overlayColor: MaterialStateProperty.all(Colors.white),
                    foregroundColor: MaterialStateProperty.all(Colors.black),
                    backgroundColor:
                        MaterialStateProperty.all(Colors.indigoAccent),
                    shadowColor: MaterialStateProperty.all(Colors.blueAccent),
                    elevation: MaterialStateProperty.all(10)),
                child: const Text(
                  '登陆',
                )),

            ElevatedButton(
                onPressed: () {},
                style: ButtonStyle(
                    minimumSize: MaterialStateProperty.all(
                        Size(MediaQuery.of(context).size.width, 40)),
                    foregroundColor: MaterialStateProperty.all(Colors.black),
                    backgroundColor: MaterialStateProperty.all(Colors.purple),
                    shadowColor: MaterialStateProperty.all(Colors.blueAccent),
                    elevation: MaterialStateProperty.all(10)),
                child: const Text(
                  '登陆',
                )),
            ElevatedButton(
                onPressed: () {},
                style: ButtonStyle(
                    shape: MaterialStateProperty.all(
                        const BeveledRectangleBorder(
                            borderRadius: BorderRadius.all(Radius.circular(15)),
                            side: BorderSide(color: Colors.green, width: 1))),
                    minimumSize: MaterialStateProperty.all(
                        Size(MediaQuery.of(context).size.width, 40)),
                    foregroundColor: MaterialStateProperty.all(Colors.black),
                    backgroundColor: MaterialStateProperty.all(Colors.pink),
                    shadowColor: MaterialStateProperty.all(Colors.blueAccent),
                    elevation: MaterialStateProperty.all(10)),
                child: const Text(
                  '登陆',
                )),

在这里插入图片描述

总结

欢迎关注，留言，咨询，交流！
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/161011.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【设计模式】七大设计原则

【设计模式】七大设计原则

设计模式学习之旅(二) 查看更多可关注后查看主页设计模式DayToDay专栏 在软件开发中，为了提高软件系统的可维护性和可复用性，增加软件的可扩展性和灵活性，程序员要尽量根据7条原则来开发程序，从而提高软件开发效率、节约软件开发成…
阅读更多...
SAP 详细解析在建工程转固定资产

SAP 详细解析在建工程转固定资产

由固定资产归口采购部门或业务部门提交购置固定资产/在建工程的申请，经审批后，若是需要安装调试，则由财务部固定资产会计建立内部订单收集成本，月末结转在建工程。项目完工后，相关部门（公司装备部、分公司装…
阅读更多...
数据库设计之三范式

数据库设计之三范式

写在前面 很多数据库设计者，都是按照自己的性子和习惯来设计数据库数据表，其实不然。 其实，数据库的设计也有要遵循的原则。 范式，就是规范，就是指设计数据库需要（应该）遵循的原则。 每个范…
阅读更多...
智慧变频中的数据监测、下发控制以及告警推送

智慧变频中的数据监测、下发控制以及告警推送

[小 迪 导读]：在智能制造的推动下，制造商对于变频器在绿色节能、智能运行、远程维护以及大数据等方面的需求也日趋凸显。针对传统变频器无法满足智能时代的需求问题，dgiot可适配多种DTU/网关对变频器进行数据监测、下发控制以及告警推送。概述…
阅读更多...
VS2019编译OSG

VS2019编译OSG

VS2019编译OSG 资源准备 由于3rd依赖项很多，编译耗时，可以在牛人编译的版本基础上开展。 杨石兴编译博客； 百度网盘： 链接：https://pan.baidu.com/s/101IXFgvKQhQOEbfLa-ztZg 提取码：osgb 编译 1. 编译…
阅读更多...
【patch-package】修改node_modules下的依赖包源码

【patch-package】修改node_modules下的依赖包源码

场景：当项目里使用的element-ui有bug，但是项目里又急需修改这bug，这个时候就需要给依赖打补丁啦~ 1、patch-package 1.1、概念 lets app authors instantly make and keep fixes to npm dependencies. Its a vital band-aid for those of u…
阅读更多...
【hcip】mpls实验

【hcip】mpls实验

目录 1.拓扑图 2.要求 3.主要配置 4.测试 1.拓扑图 2.要求 实现全网可达 3.主要配置 isp区域已配置ospf，bgp 然后配置mpls（r2） r2]mpls lsr-id 2.2.2.2 [r2]mpls Info: Mpls starting, please wait... OK! [r2-mpls]mpls ld [r2-mpls…
阅读更多...
VTK-vtkPolyData解读

VTK-vtkPolyData解读

小结：本博文主要讲解vtkPolyData接口及常用的方法实现原理。 vtkPolyData 1描述 vtkPolyData是一系列的数据集包括vertices，lines，polygons，triangle strips。 vtkPolyData是vtkDataSet的具体实现，代表了一系列的几…
阅读更多...
ELF文件格式解析

ELF文件格式解析

ELF文件是什么？ ELF是Executable and Linkable Format的缩写，字面上看就是可执行和可连接文件。在Linux下可重定位文件(.o)、可执行文件、共享目标文件(.so)、核心转储问文件(core dump) 都是使用ELF文件格式。 ELF 通常由编译器或者连接器产生&#x…
阅读更多...
2021年大数据挑战赛B题口罩佩戴检测求解全过程论文及程序

2021年大数据挑战赛B题口罩佩戴检测求解全过程论文及程序

2021年大数据挑战赛 B题 口罩佩戴检测 原题再现： 新冠疫情的爆发对人类生命安全及全球经济发展造成了重大影响。虽然现在国内疫情基本得到有效遏制，但日常防控仍不可松懈。戴口罩是预防新冠肺炎最便捷、最有效的措施和方法。人脸佩戴口罩的自动化识别可…
阅读更多...
2022跨境支付回顾，iPayLinks让“链接”更高效

2022跨境支付回顾，iPayLinks让“链接”更高效

从2015年服务第一个客户开始iPayLinks已陪伴用户走过8个春秋作为贴心的跨境资金管家iPayLinks跨越山海，链接全球以产品为基石这一年，iPayLinks持续开发新产品、新功能，帮助外贸企业和跨境卖家抓住机遇，降本增效。B2B外贸收款主打“…
阅读更多...
Python 使用TF-IDF

Python 使用TF-IDF

第一个 简易版本 直接来至 jieba 包， 一下代码直接来源 https://blog.csdn.net/qq_38923076/article/details/81630442 这里记录 进行对比 jieba.analyse.extract_tags(sentence, topK20, withWeightFalse, allowPOS()) sentence：待提取的文本语料 topK…
阅读更多...
【阶段三】Python机器学习25篇：机器学习项目实战：LigthGBM算法的核心思想、原理与LightGBM分类模型

【阶段三】Python机器学习25篇：机器学习项目实战：LigthGBM算法的核心思想、原理与LightGBM分类模型

本篇的思维导图： LigthGBM算法的核心思想 LigthGBM算法是Boosting算法的新成员，由微软公司开发。它和XGBoost算法一样是对GBDT算法的高效实现，在原理上与GBDT算法和XGBoost算法类似，都采用损失函数的负梯度作为当前决策树的残差近似值，去拟合新的决策树。 …
阅读更多...
MATLAB实验五

MATLAB实验五

实验五 A 1、在同一图形窗口绘制。利用plot绘图指令绘图命令。 （1）在窗口上部绘制正弦信号 x(t)sin(0.5πtπ4),t∈[0,4π]x(t)sin(0.5\pi t\frac \pi 4),t∈[0,4\pi]x(t)sin(0.5πt4π​),t∈[0,4π]。要求曲线为黑色实线。 （2&#xff…
阅读更多...
QT(7)-初识委托

QT(7)-初识委托

初识委托1 简介2 QT中的委托类2.1 函数2.1.1 关键函数2.1.2 其他函数3 例子3.1 官方例子3.2 修改官方例子4 设想1 简介 委托是Qt中的一种机制，用于在Qt模型/视图架构中处理特定类型的数据。委托提供了一种方便的方法来定制特定类型的数据的显示和编辑。 委托可以做…
阅读更多...
天空卫士参与编写的《数据安全治理实践指南（2.0）》正式发布

天空卫士参与编写的《数据安全治理实践指南（2.0）》正式发布

2023年1月5日，由中国信息通信研究院（以下简称“中国信通院”）、中国通信标准化协会指导，中国通信标准化协会大数据技术标准推进委员会主办，数据安全推进计划承办的第二届数据安全治理峰会在北京召开。本次峰会发布多项…
阅读更多...
算法刷题打卡第64天：平衡二叉树

算法刷题打卡第64天：平衡二叉树

平衡二叉树 难度：简单 给定一个二叉树，判断它是否是高度平衡的二叉树。 本题中，一棵高度平衡二叉树定义为： 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1 。 示例 1： 输入：root [3,9,…
阅读更多...
错误票据（第四届蓝桥杯省赛C++A/B组,第四届蓝桥杯省赛JAVAA/B组）

错误票据（第四届蓝桥杯省赛C++A/B组,第四届蓝桥杯省赛JAVAA/B组）

题目详细：解题思路：这题的难点主要在于对于数据的读入以及对于两个数字的查找对于数据的读入：1.直接对单行字符串进行转换：题目所给出的输入只有行数并不知道一行有多少个数字所以我们采用一下读取一行然后对一行的结果进行读入首…
阅读更多...
docker提交腾讯云标准模式

docker提交腾讯云标准模式

简介我们公司的容器化标准模式，本次是以redis为例进行示范技术要求:你会简单的docker容器打包环境需要:docker、docker-compose、联网环境、腾讯云容器及镜像服务（公司已有TKE）文件需要：除了你自己的Dockerfile所需要的东西外&…
阅读更多...
TensorFlow 基础（三）梯度和自动微分

TensorFlow 基础（三）梯度和自动微分

文章目录Computing gradientsGradient tapesGradients with respect to a modelControlling what the tape watchesIntermediate resultsGradients of non-scalar targetsCases where gradients returns NoneReferencesimport numpy as np import matplotlib.pyplot as pltimpo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023