Flutter开发之——基本组件-Button(1)

this.autofocus = false,

this.materialTapTargetSize, //是配置组件点击区域大小的属性，很多组件都有

this.animationDuration, //[shape]和[elevation]的动画更改的持续时间。

this.minWidth, //最小宽度

this.height, //高度

this.enableFeedback = true, // 检测到的手势是否应提供声音和/或触觉反馈。例如，在Android上

// ，点击会产生咔哒声，启用反馈后，长按会产生短暂的振动。通常，组件默认值为true。

this.child, //子view

}) : assert(clipBehavior != null),

3.1 属性

| 编号 | 属性 | 说明 |

| :-: | :-: | :-: |

| 1 | onPressed | 点击事件监听，传 null 表示按钮禁用 |

| 2 | onHighlightChanged | 水波纹高亮变化回调,按下返回true,抬起返回false |

| 3 | textTheme | 定义按钮主题 |

| 4 | textColor | 按钮文字颜色 |

| 5 | disabledTextColor | 无效按钮文字颜色 |

| 6 | color | 按钮颜色 |

| 7 | disabledColor | 无效按钮颜色 |

| 8 | focusColor | 获取焦点按钮颜色 |

| 9 | hoverColor | 悬停 按钮颜色 |

| 10 | highlightColor | 长按 按钮颜色 |

| 11 | splashColor | 点击 水波纹 颜色 |

| 12 | colorBrightness | 官网：用于此按钮的主题亮度。默认为主题的亮度 |

| 13 | elevation | 阴影 |

| 14 | focusElevation | 阴影 |

| 15 | hoverElevation | 阴影 |

| 16 | highlightElevation | 阴影 |

| 17 | disabledElevation | 阴影 |

| 18 | padding | 内边距 |

| 19 | shape | 设置形状，如圆角，圆形等 |

| 20 | clipBehavior | 剪裁

Clip.antiAlias：剪辑具有抗锯齿功能

Clip.antiAliasWithSaveLayer：在剪辑后立即剪辑具有抗锯齿和saveLayer

Clip.hardEdge：剪辑，但不应用抗锯齿。

Clip.none：不剪辑 |

| 21 | focusNode | |

| 22 | materialTapTargetSize | |

| 23 | animationDuration | 动画时长 |

| 24 | child | 子view |

3.2 OutlineButton 特性

| 编号 | 属性 | 说明 |

| :-: | :-: | :-: |

| 1 | borderSide | 线框 线颜色 ，如红色：BorderSide(color: Colors.red,) |

| 2 | clipBehavior | 相框风格，如：Clip.antiAlias |

3.3 RaisedButton.icon 特性

| 编号 | 属性 | 说明 |

| :-: | :-: | :-: |

| 1 | icon | 图标 |

| 2 | label | 通常是文字 |

3.4 DropdownButton 特性

| 编号 | 属性 | 说明 |

| :-: | :-: | :-: |

| 1 | hint | 提示语 |

| 2 | value | 当前值 |

| 3 | iconSize | 下拉框图片大小 |

| 4 | icon | 右边图标 默认为下三角 |

| 5 | items | 下拉框数据集合 |

| 6 | onChanged | 监听 |

3.5 FloatingActionButton 特性

| 编号 | 属性 | 说明 |

| :-: | :-: | :-: |

| 1 | child | 子元素，一般为 Icon，不推荐使用文字 |

| 2 | tooltip | 长按文字提示 |

| 3 | backgroundColor | 背景颜色（默认使用主题颜色） |

| 4 | mini | 是否是 mini 类型默认 false |

设置位置，在外部使用（与FloatingActionButton同级）floatingActionButtonLocation

| 取值 | 位置 |

| :-: | :-: |

| FloatingActionButtonLocation.centerDocked | 底部居中 与底部无间距 |

| FloatingActionButtonLocation.centerFloat | 底部居中 与底部有间距 |

| FloatingActionButtonLocation.endDocked | 右下角 与底部无间距 |

| FloatingActionButtonLocation.endFloat | 右下角 与底部有间距 |

| FloatingActionButtonLocation.endTop | 右上角 |

| FloatingActionButtonLocation.startTop | 左上角 |

四 示例

---

4.1 ButtonStyleButton类型

4.1.1 示例

TextButton(onPressed: () {}, child: Text(“TextButton”)), //TextButton文字

TextButton.icon(onPressed: (){}, icon: Icon(Icons.send), label: Text(“TextButton.icon”)),//TextButton文字+icon

ElevatedButton(onPressed: () {}, child: Text(“ElevatedButton”)),//ElevatedButton文字

ElevatedButton.icon(onPressed: (){}, icon: Icon(Icons.send), label: Text(“ElevatedButton.icon”)),//ElevatedButton文字+icon

OutlinedButton(onPressed: () {}, child: Text(“OutlineButton”)),//OutlinedButton文字

OutlineButton.icon(onPressed: (){}, icon: Icon(Icons.send), label: Text(“OutlineButton.icon”))//OutlineButton文字+icon

4.1.2 效果图

4.2 MaterialButton类型

4.2.1 示例

MaterialButton(onPressed: (){},child: Text(“MaterialButton”),),

FlatButton(child: Text(“FlatButton”), onPressed: () {},),

FlatButton.icon(icon: Icon(Icons.info), label: Text(" FlatButton.icon"), onPressed: (){},),

RaisedButton(child: Text(“RaisedButton”), onPressed: () {},),

RaisedButton.icon(onPressed: (){}, icon: Icon(Icons.thumb_up), label: Text(“RaisedButton.icon”)),

OutlineButton(onPressed: () {}, child: Text(“OutlineButton”),),

OutlineButton.icon(icon: Icon(Icons.add), label: Text(“OutlineButton.icon”), onPressed: (){}),

4.2.2 效果图

4.3 IconButton

4.3.1 示例代码

IconButton(icon: Icon(Icons.send), onPressed: () {Fluttertoast.showToast(msg: “IconButton”);},),

4.3.2 效果图

4.4 下拉按钮(DropdownButton)

4.4.1 示例代码

代码一

String dropdownValue = ‘One’;

DropdownButton(

value: dropdownValue,

onChanged: (String newValue) {

setState(() {

dropdownValue = newValue;

});

},

items: [‘One’, ‘Two’, ‘Three’, ‘Four’].map<DropdownMenuItem>((String value) {

return DropdownMenuItem(value: value, child: Text(value),);

}).toList(),

)

代码二

String dropdownValue = ‘One’;

DropdownButton(

value: dropdownValue,

onChanged: (String newValue) {

setState(() {

dropdownValue = newValue;

});

},

items: [

DropdownMenuItem(value:“One”,child: Text(‘One’)),

DropdownMenuItem(value:“Two”,child: Text(‘Two’)),

DropdownMenuItem(value:“Three”,child: Text(‘Three’)),

DropdownMenuItem(value:“Four”,child: Text(‘Four’))] ),

4.4.2 效果图

4.5 悬浮按钮(FloatingActionButton)

4.5.1 示例代码

floatingActionButton: FloatingActionButton(

onPressed: _incrementCounter,

tooltip: ‘Increment’,

child: Icon(Icons.add),

),

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

4.5.2 效果图

五 Button的自定义

总结

这次面试问的还是还是有难度的，要求当场写代码并且运行，也是很考察面试者写代码
因为Android知识体系比较庞大和复杂的，涉及到计算机知识领域的方方面面。在这里我和身边一些朋友特意整理了一份快速进阶为Android高级工程师的系统且全面的学习资料。涵盖了Android初级——Android高级架构师进阶必备的一些学习技能。

附上：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题（含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）

里面包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中…
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
算机知识领域的方方面面。在这里我和身边一些朋友特意整理了一份快速进阶为Android高级工程师的系统且全面的学习资料。涵盖了Android初级——Android高级架构师进阶必备的一些学习技能。

附上：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题（含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）
[外链图片转存中…(img-V10g9cjS-1714740728515)]
里面包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中…
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！