Skip to content

Commit d0231f1

Browse files
committed
refactor:优化floatingactionbutton内容’
1 parent 1a325d6 commit d0231f1

File tree

2 files changed

+42
-2
lines changed
  • docs/widget/navigator/floatingactionbutton
  • lib/widget/navigator/floatingactionbutton

2 files changed

+42
-2
lines changed
Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,35 @@
1-
## **FloatingActionButton**
1+
## **FloatingActionButton**
2+
> 在Scaffold中属性floatingActionButton实现FloatingActionButton,该组件是个圆形的浮层按钮,一般情况下child可用icon进行绘画。
3+
4+
### 构造函数
5+
```
6+
FloatingActionButton({
7+
Key key,
8+
this.child,
9+
this.tooltip,
10+
this.foregroundColor,
11+
this.backgroundColor,
12+
this.heroTag = const _DefaultHeroTag(),
13+
this.elevation = 6.0,
14+
this.highlightElevation = 12.0,
15+
double disabledElevation,
16+
@required this.onPressed,
17+
this.mini = false,
18+
this.shape = const CircleBorder(),
19+
this.clipBehavior = Clip.none,
20+
this.materialTapTargetSize,
21+
this.isExtended = false,
22+
})
23+
```
24+
25+
### 属性介绍
26+
- onPressed: 必填属性,函数调用,点击按钮后回调事件
27+
- child: 组件子组件内容,可通过Icon简单的增加图标
28+
- elevation:图标下阴影大小
29+
- highlightElevation: 点击后阴影扩散范围
30+
- tooltip:长按提示
31+
- foregroundColor:前景色,如图标、文字的颜色
32+
- backgroundColor:背景填充色
33+
- mini: 默认false,true时为迷你按钮
34+
35+

lib/widget/navigator/floatingactionbutton/demo.dart

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,13 @@ class _IndexState extends State<Index> {
3535
),
3636
),
3737
floatingActionButton: FloatingActionButton(
38-
backgroundColor: Colors.red,
38+
clipBehavior: Clip.antiAliasWithSaveLayer,
39+
tooltip: '长按后的提示',
40+
foregroundColor:Colors.blue, // 该颜色被Icon覆盖
41+
backgroundColor: Colors.red, // 背景填充色
42+
elevation: 10, // 下阴影大小
43+
highlightElevation: 50, // 阴影扩散范围
44+
mini: true,
3945
child: Icon(
4046
Icons.notifications_active,
4147
color: Colors.white,

0 commit comments

Comments
 (0)