【Flutter】基础组件【09】Button
1. 写在前面
在上篇文章中介绍了Flutter中的BottomNavigationBar组件，今天继续学习【Flutter】基础组件中的Button组件。
- 【基础语法合集】
【Flutter】Dart中的var、final 和 const基本使用
【Flutter】Dart数据类型之num
【Flutter】Dart数据类型之String
【Flutter】Dart的数据类型list&Map(数组和字典)
【Flutter】Dart的方法与箭头函数
【Flutter】Dart的方法中的可选参数、方法作为参数传递
【Flutter】Dart中的匿名函数、闭包
【Flutter】Dart中的类和对象
【Flutter】Dart中的构造函数
【Flutter】Dart的工厂构造方法&单例对象&初始化列表
【Flutter】Dart的类方法和对象操作符
【Flutter】Dart中的继承
【Flutter】Dart中的抽象类和接口
【Flutter】Dart中的Mixins混入你知道是什么吗？
- [基础组件合集]
【Flutter】基础组件【01】Text
【Flutter】基础组件【02】Container
【Flutter】基础组件【03】Scaffold
【Flutter】基础组件【04】Row/Column
【Flutter】基础组件【05】Icon
【Flutter】基础组件【06】Image
【Flutter】基础组件【07】Appbar
【Flutter】基础组件【08】BottomNavigationBar
2. Button介绍
2. 1 常用的Button类型
Flutter 里有很多的 Button 组件很多，常见的按钮组件有：
- RaisedButton ：凸起的按钮（现在的新版本已经弃用了，改为
ElevatedButton） - FlatButton ：扁平化的按钮（新版本已经弃用了，改为
TextButton） - OutlineButton：线框按钮（改为
OutlinedButton） - IconButton ：图标按钮
- ButtonBar：按钮组
- FloatingActionButton:浮动按钮
2.2 Button常用属性
按钮组件有以下常用属性：
- onPressed ：必填参数，按下按钮时触发的回调，接收一个方法，传 null 表示按钮禁用，会显示禁用相关样式
- child ：可以放入Widget
- textColor ：文本颜色
- color ：文本颜色
- disabledColor ：按钮禁用时的颜色
- disabledTextColor ：按钮禁用时的文本颜色
- splashColor ：点击按钮时水波纹的颜色
- highlightColor ：点击（长按）按钮后按钮的颜色
- elevation ：阴影的范围，值越大阴影范围越大
- padding ：内边距
- shape ：设置按钮的形状
2.3 代码举例
2.3.1 TextButton
- TextButton
TextButton顾名思义就是文字按钮，一般使用在toolbars, in dialogs和其他内容内嵌在一起，文本按钮没有可见的边框，因此必须依靠它们相对于其他内容的位置来获取上下文。
Container(color: Colors.orange,child: TextButton(onPressed: () {print("TextButton");},child: Text('TextButton'),))
- TextButton 和 FlatButton
2.3.2 ElevatedButton
使用凸起的按钮为原本大部分为平面的布局添加维度，例如在长而繁忙的内容列表中，或在广阔的空间中。避免在对话框或卡片等已经凸起的内容上使用凸起的按钮。
ElevatedButton(child: Text('ElevatedButton'),onPressed: () {print("ElevatedButton");},),
2.3.3 ButtonBar
ButtonBar，它里面可以放多个Button，ButtonBar可以给里面的button做统一样式处理。
Container(color: Colors.yellow,width: 450,child: ButtonBar(buttonPadding: EdgeInsets.all(5),buttonHeight: 30,alignment: MainAxisAlignment.spaceBetween,buttonTextTheme: ButtonTextTheme.primary,layoutBehavior: ButtonBarLayoutBehavior.padded,children: [ElevatedButton(child: Text('ElevatedButton'),onPressed: () {print("ElevatedButton");},),RaisedButton(child: Text('RaisedButton1'),onPressed: () {print("RaisedButton1");},),RaisedButton(child: Text('RaisedButton2'),onPressed: () {print("RaisedButton2");},),],),)
2.3.4 OutlinedButton
一个 Material Design 的“Outlined Button”, 本质上是一个带有轮廓边框的 TextButton。
- OutlineButton和OutlinedButton代码运行效果对比
2.3.5 FloatingActionButton
一个 material design的浮动按钮。
浮动操作按钮是一个圆形图标按钮，它悬停在内容上以提升应用程序中的主要操作。 浮动操作按钮最常用于[Scaffold.floatingActionButton] 场景。
FloatingActionButton如果存在多个需要指定heroTag
Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,//主轴crossAxisAlignment: CrossAxisAlignment.center,//交叉轴textBaseline: TextBaseline.alphabetic,//文本对齐children: [Center(child: FloatingActionButton(child: Text('111111Button333'),onPressed: () {print("FloatingActionButton");}),),Center(child: FloatingActionButton(heroTag: '2',child: Icon(Icons.access_alarm_rounded),onPressed: () {print("FloatingActionButton2");}),),],)
- FloatingActionButton代码运行效果
2.3.6 IconButton
IconButton是 material design的图标按钮，IconButton是打印在 [Material] 小部件上的图片，通过填充颜色来对触摸做出反应。
IconButton通常用于 [AppBar.actions] 场景，但它们也可以用于许多其他地方。
- 代码运行IconButton效果
2.3.7 圆角Button
这里用RaisedButton来举例，其实这几个Button都差不多，只是各自有一个独特的初始化属性而已，比如RaisedButton就是自带圆角，有水波纹特效，带阴影等属性。
- 切圆角
除了圆角 button，我们还有使用圆角的需求，比如一个Container如何切成圆角的呢？这就可以借助decoration来实现了，代码如下：
Center(child: Container(width: 100,height: 70,alignment: Alignment.center,decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),color: Colors.orange),child: Text('我是文字',style: TextStyle(fontSize: 14),textAlign:TextAlign.center,),),)
- 效果如下：
3. 写在后面
关注我，更多内容持续输出
- CSDN
- 掘金
- 简书
【Flutter】基础组件【09】Button相关推荐
- 一份超级详细的Flutter基础组件练习示例，请查收！
学习B站技术胖的flutter基础课程整理的示例,为了平时方便查阅,同时希望能和大家一同进步~ Flutter基础组件 Hello world import 'package:flutter/mate ...
- Flutter 基础组件之 Text
终于安装好了 Flutter 的环境,既然入了坑,就一点一点学吧,Flutter 可以说一切皆组件吧,所以要熟练掌握各个基础组件的 API,然后才能在面对复杂需求的时候才能得心应手的将各个组件组合起来 ...
- 【Flutter -- 基础组件】Flutter 导航栏
文章目录 1. TabBar 1.1 代码 1.2 效果图 2. BottomNavigationBar 2.1 构建底部标签 2.2 创建导航栏 2.3 效果图 1. TabBar Flutter ...
- Flutter 基础组件之 Container
官方简介中,说 Container 组件是一个方便绘制.定位和调整子组件大小的组件. 首先 Container 会在 child 子组件周围填充 padding(包括 decoration 中存在的 ...
- Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用
提示:此文章为前端学习flutter过程,如有歧义期望各位大大的宝贵意见 学习Dart 基础知识 移步这里 安装flutter环境相关 移步这里 flutter基础组件使用相关 移步这里 文章目录 一 ...
- Flutter(四)——基础组件
本文目录 前言 基础组件 Text 常用属性使用 Icon Image Button FlutterLogo 前言 你如果做过Android开发,那一定熟悉里面各种官方提供的布局,比如LinearLa ...
- 第 1-8 课：基础组件详解（Text、Image、Button）
前面已经讲解了大量的 Flutter 相关基础知识,从这节课开始,我们将进行 Flutter 的系列 Widget.布局的学习.那么这节课就带领大家对 Flutter 的基础 Widget 中的几个典 ...
- Flutter基础布局组件及实现
https://www.cnblogs.com/lxlx1798/p/11084904.html 一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Paddi ...
- flutter 基础知识点总结
前提:从事开发已经十年了,PC开发/Android开发/后端开发,初级/中级/高级/架构师,成员/组长/开发负责人,以及各种考证和阶段目标计划-,一路走来喜怒哀乐/酸甜苦辣都体验了. 人无远虑必有近忧 ...
- Flutter 常用组件-总览
文章目录 1. 重要概念 2. 容器组件 3. 图片组件 4. 文本组件 4.1 Text 4.2 RichText 5. 图标及按钮组件 5.1 图标组件 常用属性 5.2 图标按钮组件 常用属性 ...
最新文章
- 《机器人与数字人：基于MATLAB的建模与控制》——2.3节指数映射和k过程
- java类功能说明注释添加,IDEA添加Java类注释模版的方法
- python编程和c语言编程的区别-通过实例浅析Python对比C语言的编程思想差异
- 必须为非自相关端口上的非激活接收指定至少一个已初始化的相关集
- 数据与智能武装营销飞轮，网易探索C2B时代营销新玩法
- （原创）一个和c#中LazyT类似的c++ LazyT类的实现
- 微服务架构设计基础之领域驱动设计
- 大到创业，小到做一份副业
- java 并发原子性与易变性 来自thinking in java4 21.3.3
- 关于Decorator模式
- matlab最优化函数
- 显卡驱动程序如何更新
- 计算机改显存会有啥影响,显卡内存越大越好吗？显存对计算机速度（全文）的影响...
- 怎么禁止网络启动计算机,如何禁用、启用本地连接（网卡）？
- 计算机常见故障及排除方法,科学网—计算机常见故障和解决办法 - 李卓哲的博文...
- mysql1.2.17,17.1 MySQL主从介绍17.2 准备工作17.3 配置主17.4 配置从17.5 测试主从同步...
- 2021.7纪中快乐游记（下）
- 【CloudCompare】高程显示
- 关于128x64OLED屏幕字体类型以及字体大小添加方法
- python--学习数据伪造模块faker
热门文章