「这是我参与11月更文挑战的第6天，活动详情检查：2021最终一次更文挑战」
今日小常识——【Flutter】根底组件【09】Button！
1. 写在前面
在上篇文章中介绍了Flutter中的Material组件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】Image
【Flutter】根底组件【06】Icon
【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
- 简书
喜欢就点个赞吧
觉得有收获的，能够来一波 收藏+重视，避免你下次找不到我
欢迎大家留言沟通，批评指正，
转发请注明出处，谢谢支撑！
