AppBar:工具栏上的图标按钮(IconButton)

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

AppBar 一般用在 Scaffold 小部件里面,作为它的 appBar 属性的值 ... 之前我们用过这个小部件 .. AppBar 里面可以设置一下它的 title,就是标题 .. 标题默认居中显示 ..

Leading

标题的左边可以设置显示一个 leading 小部件 .. 添加一个 leading 属性 ... 小部件可以使用一个 IconButton,小图标按钮 ..

先添加一个 icon 属性 ... 设置一个小图标 .. 这里可以用一个 Icon 部件 .. 然后设置一个小图标 .. Material 应用里面给我们预定义了一些小图标 .. 它们都在 Icons 里面 ..

用一下 Icons 里的 menu 这个小图标 ..

图标按钮上可以再添加一个 tooltip ... 用它说明一下这个按钮的作用 ... 输入 Navigation ..

IconButton 里面还有需要设置一个行为 .. 添加一个 onPressed 属性 .. 先把它的值设置成 null .. 保存一下 .. 热重载以后 ..

在 Appbar 标题的左边,显示的这个小图标用的是 IconButton ... 这块位置叫 Leading ...

默认小图标是禁用的状态 ... 因为我们还没有指定按了它以后要做的事情 ..

再修改一下 onPressed 的值 .. 一个回调 .. 用一下 debugPrint ,在调试控制台输出点文字 ... Navigation button is pressed. 再保存一下 ... 现在按钮图标会是激活状态 ...

打开编辑器的调试控制台 ... 再去按一下这个导航小图标 ... 控制台上会输出 Navigation button is pressed ...

Actions

标题的右边这块区域是 Actions ... 在这里我们可以设置一组动作 .. 一般也是用 IconButton 小部件 ... 先添加一个 actions ... 它的值是一组 Widget ... 复制一份上面这个 IconButton ... 粘贴到 actions 里面 ..

图标可以用一下 Icons 里的 search ... 提示文字是 Search .. 按下去以后,在控制台上输出 Search button is pressed ..

屏幕上显示的这个搜索按钮会出现在 Appbar 的 Actions 区域这里 ... 你可以在这里继续添加其它的东西.. 因为在 Actions 区域可以显示一组小部件 ..

暂进我们先只留下这个 Search 按钮 ...

https://docs.flutter.io/flutter/material/IconButton-class.html

AppBar:工具栏上的图标按钮(IconButton)《 Flutter 移动应用:界面结构 》

统计

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

社会化网络

关于

微信订阅号

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