Flutter|Flutter 1.22版本新增的Button
文章图片
Flutter 1.22版本新增了3个按钮,TextButton、OutlinedButton、ElevatedButton,虽然以前的Button没有被废弃,但还是建议使用新的Button。【Flutter|Flutter 1.22版本新增的Button】为什么会新增 Button?因为想要将以前的按钮调整为统一的外观比较麻烦,因此以前经常使用自定义的按钮,而新增的按钮解决了此类问题,可以非常方便的设置整体外观。
1.22版本前的按钮 | 主题 | 1.22版本后的按钮 | 主题 |
---|---|---|---|
FlatButton | ButtonTheme | TextButton | TextButtonTheme |
OutlineButton | ButtonTheme | OutlinedButton | OutlinedButtonTheme |
RaisedButton | ButtonTheme | ElevatedButton | ElevatedButtonTheme |
文章图片
外观上并没有很大的不同,但TextButton、OutlinedButton、ElevatedButton 将外观属性集合为一个 ButtonStyle,非常方便统一控制。
TextButton、OutlinedButton、ElevatedButton 这3个按钮的用法和属性完全相同,下面以 TextButton 为例。
简单使用:
TextButton(
child: Text('TextButton'),
)
文章图片
当 onPressed 不设置或者设置为 null 时,按钮为不可用状态。
TextButton(
child: Text('TextButton'),
onPressed: (){},
)
文章图片
onPressed 为点击回调,onLongPress 为长按回调。
下面是最重要的属性 ButtonStyle,一切外观都是通过这个属性进行控制,属性如下:
const ButtonStyle({
this.textStyle, //字体
this.backgroundColor, //背景色
this.foregroundColor, //前景色
this.overlayColor, // 高亮色,按钮处于focused, hovered, or pressed时的颜色
this.shadowColor, // 阴影颜色
this.elevation, // 阴影值
this.padding, // padding
this.minimumSize, //最小尺寸
this.side, //边框
this.shape, //形状
this.mouseCursor, //鼠标指针的光标进入或悬停在此按钮的[InkWell]上时。
this.visualDensity, // 按钮布局的紧凑程度
this.tapTargetSize, // 响应触摸的区域
this.animationDuration, //[shape]和[elevation]的动画更改的持续时间。
this.enableFeedback, // 检测到的手势是否应提供声音和/或触觉反馈。例如,在Android上,点击会产生咔哒声,启用反馈后,长按会产生短暂的振动。通常,组件默认值为true。
});
这些属性的用法也和以前的不一样,比如 textStyle 并不是直接设置 TextStyle,下面设置字体:
TextButton(
child: Text('TextButton'),
onPressed: () {},
style: ButtonStyle(
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 20)),
),
)
文章图片
注意:字体颜色的设置不通过textStyle 设置,而是通过 foregroundColor:
TextButton(
child: Text('TextButton'),
onPressed: () {},
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.red),
),
)
文章图片
根据按钮的状态改变字体颜色:
TextButton(
child: Text('TextButton'),
onPressed: () {},
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.resolveWith((states) {
return states.contains(MaterialState.pressed)
? Colors.blue
: Colors.red;
}),
),
)
文章图片
其他属性用法和上面类似,不在一一介绍。
进行全局控制:
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
textButtonTheme: TextButtonThemeData(
style: ButtonStyle()
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle()
),
outlinedButtonTheme: OutlinedButtonThemeData(
style: ButtonStyle()
)
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
)
ButtonStyle 内的属性配置和单个按钮的用法是一致的。
通过上面的介绍,建议使用 TextButton、OutlinedButton、ElevatedButton 替换 FlatButton、OutlineButton、RaisedButton。
交流 老孟Flutter博客(330个控件用法+实战入门系列文章):http://laomengit.com
欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:
文章图片 |
文章图片 |
推荐阅读
- flutter|Flutter的button的按钮ElevatedButton
- Android开发|Flutter 2.10 正式发布,包含 Windows 平台正式版,快来看看有什么新内容
- 二进制部署1.23.4版本k8s集群-2-安装DNS服务
- 二进制部署1.23.4版本k8s集群-1-系统安装及环境准备
- 青龙面板|青龙面板最新版本2.10.11+(诺兰短信登录)nvjdc详细教程
- 吐血教程(搭建Flutter开发环境(文末抽奖送书))
- 分布式边缘容器项目 SuperEdge v0.7.0 版本来袭!
- 分布式边缘容器项目|分布式边缘容器项目 SuperEdge v0.7.0 版本来袭!
- Docker安装与基本命令使用
- Spring Cloud Alibaba 2021.0.1.0 发布(版本号再也不迷糊了)