当前位置:网站首页>Flutter入门进阶之旅(八)Button Widget
Flutter入门进阶之旅(八)Button Widget
2022-08-09 12:04:00 【谢栋_】
引言
上一篇博文中我们学习了GestureDetector,了解到借助GestureDetector可以赋予某些本身不具备点击回调的widget点击回调能力,完成跟用户的一些简单手势交互并作出相应的逻辑处理,我们还提到了有些widget像RaisedButton和FloatingActionButton控件本身就有onPressed回调,当用户点击控件时触发回调。本篇博客中我们就把上篇博客中提及到的各种Button归类统一说明一下。
Button集合效果图
上述RaisedButton、FlatButton、OutlineButton、MaterialButton、还有RawMaterialButton、FloationgActionButton,我分三类给大家讲解,OutlineButton作为一类,RaisedButton、FlatButton、MaterialButton、RawMaterialButton不论是从构造方法还是使用上都很相似,这几个button分为一类,另外FloatingActionButton作为一类。
1.OutlineButton:
OutlineButton默认带有一个边框,我们可以通过属性指定正常状态,跟用户点击状态下的边框颜色。
我们来看下OutlineButton的构造方法,并且对它的相应属性做下使用说明。
const OutlineButton({
Key key,
@required VoidCallback onPressed,
ButtonTextTheme textTheme, //按钮上字体主题
Color textColor, //字体颜色
Color disabledTextColor, //按钮禁用时候文字的颜色
Color color, //按钮背景颜色
Color highlightColor,//点击或者toch控件高亮的时候显示在控件上面,水波纹下面的颜色
Color splashColor, //水波纹的颜色
double highlightElevation,//高亮时候的阴影
this.borderSide,//按钮边框
this.disabledBorderColor, //按钮禁用时边框的颜色
this.highlightedBorderColor,//高亮时边框的颜色
EdgeInsetsGeometry padding,//边距
ShapeBorder shape, //设置shape
Clip clipBehavior = Clip.none,
Widget child,
})
上述OutlineButton效果图上两个button的具体代码:
未指定任何样式:
new OutlineButton(onPressed: () {
}, child: new Text("OutlineButton")),
效果图
设置边框样式
new OutlineButton(
textColor: Colors.blue,
highlightedBorderColor: Colors.deepOrange,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
borderSide: new BorderSide(color: Colors.blueAccent),
onPressed: () {
},
child: new Text("OutlineButton")
),
效果图
2.FloatingActionButton
FloatingActionButton做过原生安卓开发的读者应该很熟悉这个名字,在Flutter中不光引用了原生安卓的叫法,使用方法也大同小异。
构造方法
const FloatingActionButton({
Key key,
this.child,
this.tooltip,
this.foregroundColor,
this.backgroundColor,
this.heroTag = const _DefaultHeroTag(),
this.elevation = 6.0,
this.highlightElevation = 12.0,
@required this.onPressed,
this.mini = false,
this.shape = const CircleBorder(),
this.clipBehavior = Clip.none,
this.materialTapTargetSize,
this.isExtended = false,
})
由于使用方法跟原生安卓中类似,我就不展开详细讲解了,稍后我会把篇首效果图上的所有代码贴上,大家可参考里面对floatingactionbutton的用法。
3.RaisedButton、FlatButton、OutlineButton、MaterialButton
这几类button十分类似,所以我把他们归为一类做讲解,但是也会有细微的差别,像FlatButton不支持设置手指点击抬起后的颜色,其他常规用法几乎一致,关于具体的细微差别,读者可自行对比构造方法,自行测试,我拿RaisedButton把代码,贴上代码,为大家演示下这几类Button的常用属性配置说明。
new RaisedButton(
color: Colors.blueAccent,
//按钮的背景颜色
padding: EdgeInsets.all(15.0),
//按钮距离里面内容的内边距
textColor: Colors.white,
//文字的颜色
textTheme: ButtonTextTheme.normal,
//按钮的主题
onHighlightChanged: (bool b) {
//水波纹高亮变化回调
},
disabledTextColor: Colors.black54,
//按钮禁用时候文字的颜色
disabledColor: Colors.black54,
//按钮被禁用的时候显示的颜色
highlightColor: Colors.green,
//点击或者toch控件高亮的时候显示在控件上面,水波纹下面的颜色
splashColor: Colors.amberAccent,
//水波纹的颜色
colorBrightness: Brightness.light,
//按钮主题高亮
elevation: 10.0,
//按钮下面的阴影
highlightElevation: 10.0,
//高亮时候的阴影
disabledElevation: 10.0,
//按下的时候的阴影
shape: new RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
//设置形状
onPressed: () {
},
child: new Text("RaisedButton"),
),
上述讲解中读者如果有不明白的地方可以参考文章开篇中贴出的各种button的效果图源码做参考,或者留言给我一块探讨,文章开篇中贴出的各种button的效果图源码如下。
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new ButtonPage()));
}
class ButtonPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Button Widget"),
),
floatingActionButton: new FloatingActionButton(
onPressed: () {
}, child: new Icon(Icons.adb), tooltip: "点击"),
body: new ListView(
children: <Widget>[
new Text("简单样式",
textAlign: TextAlign.center,
style: new TextStyle(color: Colors.brown, fontSize: 20.0)),
new RaisedButton(onPressed: () {
}, child: new Text("RaisedButton")),
new FlatButton(onPressed: () {
}, child: new Text("FlatButton")),
new MaterialButton(
onPressed: () {
}, child: new Text("MaterialButton")),
new RawMaterialButton(
onPressed: () {
}, child: new Text("RawMaterialButton")),
new OutlineButton(onPressed: () {
}, child: new Text("OutlineButton")),
new SizedBox(height: 20),
new Text("升级样式",
textAlign: TextAlign.center,
style: new TextStyle(color: Colors.brown, fontSize: 20.0)),
new RaisedButton(
color: Colors.blueAccent,
//按钮的背景颜色
padding: EdgeInsets.all(15.0),
//按钮距离里面内容的内边距
textColor: Colors.white,
//文字的颜色
textTheme: ButtonTextTheme.normal,
//按钮的主题
onHighlightChanged: (bool b) {
//水波纹高亮变化回调
},
disabledTextColor: Colors.black54,
//按钮禁用时候文字的颜色
disabledColor: Colors.black54,
//按钮被禁用的时候显示的颜色
highlightColor: Colors.green,
//点击或者toch控件高亮的时候显示在控件上面,水波纹下面的颜色
splashColor: Colors.amberAccent,
//水波纹的颜色
colorBrightness: Brightness.light,
//按钮主题高亮
elevation: 10.0,
//按钮下面的阴影
highlightElevation: 10.0,
//高亮时候的阴影
disabledElevation: 10.0,
//按下的时候的阴影
shape: new RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
//设置形状
onPressed: () {
},
child: new Text("RaisedButton"),
),
new FlatButton(
color: Colors.lightGreen,
textColor: Colors.red,
onPressed: () {
}, child: new Text("FlatButton")),
new OutlineButton(
textColor: Colors.blue,
highlightedBorderColor: Colors.deepOrange,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
borderSide: new BorderSide(color: Colors.blueAccent),
onPressed: () {
},
child: new Text("OutlineButton")
),
MaterialButton(
color: Colors.yellow,
textColor: Colors.red,
onPressed: () {
},
child: new Text("MaterialButton")
),
RawMaterialButton(
fillColor: Colors.deepOrange,
onPressed: () {
},
child: new Text("RawMaterialButton",style: new TextStyle(color: Colors.white),)
)
],
),
);
}
}
边栏推荐
- Glory to the Blue Yonder, speeds up the strategic growth
- [Interview high-frequency questions] Linked list high-frequency questions that can be gradually optimized
- 曼城推出可检测情绪的智能围巾,把球迷给整迷惑了
- 你没见过的《老友记》镜头,AI给补出来了|ECCV 2022
- 国产抗新冠口服药每瓶不超300元/ 我国IPv6网络全面建成/ 谷歌入局折叠屏手机...今日更多新鲜事在此...
- 太卷了... 腾讯一面被问到内存满了,会发生什么?
- 已解决IndentationError: unindent does not match any oute r indentation Level
- 1-hour live broadcast recruitment order: industry big names share dry goods, and enterprise registration opens丨qubit·viewpoint
- FFmpeg库在win10上配置使用(不配置libx264)
- K个结点的组内逆序调整
猜你喜欢
中科院打脸谷歌:普通电脑追上量子优越性,几小时搞定原本要一万年的计算...
2022 Niu Ke Duo School (6) M. Z-Game on grid
AQS同步组件-FutureTask解析和用例
HAproxy:负载均衡
基于CAP组件实现补偿事务与幂等性保障
AQS Synchronization Component - FutureTask Analysis and Use Cases
鹅厂机器狗花式穿越10m梅花桩:前空翻、单桩跳、起身作揖...全程不打一个趔趄...
用 API Factory 产品生成 API 文档
阻塞、非阻塞、多路复用、同步、异步、BIO、NIO、AIO 一锅端
26、管道参数替换命令xargs
随机推荐
8、IDEA提交代码出现: Fetch failed fatal: Could not read from remote repository
ARP协议原理
proto3-2 syntax
Byte Qiu Zhao confused me on both sides, and asked me under what circumstances would the SYN message be discarded?
Adalvo acquires its first branded product, Onsolis
Common gadgets of Shell (sort, uniq, tr, cut)
基于CAP组件实现补偿事务与幂等性保障
中科院打脸谷歌:普通电脑追上量子优越性,几小时搞定原本要一万年的计算...
Shell之常用小工具(sort、uniq、tr、cut)
微信小程序支付及退款整体流程
腾讯欲成育碧最大股东/ 米哈游招NLP内容生成研究员/ AI发现四千余物种濒临灭绝...今日更多新鲜事在此...
水能自发变成“消毒水”,83岁斯坦福教授:揭示冬天容易得流感的部分原因...
OpenSSF的开源软件风险评估工具:Scorecards
IDEA close/open reference prompt Usages
实验记录:搭建网络过程
We really need DApp?Really can't meet our fantasy App?
全面了解什么是TPS、QPS以及两者的区别
LeetCode #101. Symmetric Binary Tree
基于STM32+铂电阻设计的测温仪
WPF implements a MessageBox message prompt box with a mask