FloatingActionButton:漂浮动作按钮

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在 Scaffold 里面给漂浮动作按钮留了个地方叫 floatingActionButton .. 它的值一般就是 FloatingActionButton .. 先用一个属性表示这个小部件 .. 在 build 方法里面 .. 定义一下这个 _floatingActionButton .. 它是一个 FloatingActionButton ..

点按漂浮动作按钮要做的事情可以使用 onPressed 属性来设置一下 ... 它的 child 属性里的东西就是要在这个按钮上显示的东西 .. 一个小图标 .. 用一下 Icons.add ..

elevation 控制的是它跟下一层之间的高度 .. 如果把它设置成 0.0,按钮的阴影效果就不见了 .. 表示它跟下一层贴合到了一块儿 ..

默认按钮的颜色是我们在主题里设置的 .. 也可以单独用一个 backgroundColor 属性设置一下按钮的背景颜色 .. 把它设置成 black87 ..

按钮的形状可以使用 shape 属性改变 .. 用一个 BeveledRectangleBorder() .. 现在按钮会变成正方型 ..

我们可以给它添加点 borderRadius .. BorderRadius.circular .. 大小先把它设置成 10.0 .. 这样会得到一个斜角矩形的按钮 ...

再修改一下 borderRadius 的值 .. 换成 30.0 .. 这回得到会是一个菱形的按钮 ..

extended

还有一种 extended 类型的漂浮动作按钮,上面除了图标还可以添加一个标签文字 ..

先把 floatingActionButton 属性的值,换成 _floatingActionButtonExtended ... 在上面再去添加一个 _floatingActionButtonExtended ... 它的值用一下 FloatingActionButton 的 extended 这个方法去构建漂浮动作按钮 ...

按钮的 onPressed 是点按它以后要执行的动作 .. 这种按钮没有 child .. 可以直接用 icon 属性,设置一下要显示的小图标 .. Icons.add .. 然后再用一个 label ... 可以添加一个标签文字 .. 文字是 Add ..

现在,你看到的就是一个 extended 类型的漂浮动作按钮 ..

FloatingActionButton:漂浮动作按钮《 Flutter 移动应用:按钮 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点