用户登录

用 Scaffold 小部件构建的应用页面,顶部一般是一个 AppBar 小部件。 先在这个 Scaffold 里面添加一个 appBar 参数,值可以是一个 AppBar。

这个 AppBar 小部件又分成了几个部分,我们可以分别设置在这些地方要显示的小部件。先设置一下它的 title,用一个 Image.asset 显示一个资源图像,assets/images/logo.png,把图像的 width 设置成 32,再把 color 设置成 Colors.white。

现在这个 AppBar 小部件的中间就会显示一个资源图像。

下面再设置一下它的 leading 位置上的东西,添加一个 leading 参数,值是一个 IconButton,带图标的按钮,先设置一下按钮的 onPressed,一个空白的函数。再设置一下 icon,对应的值是一个小图标,要显示的小图标是 Icons.menu。

这样在 AppBar 的左侧就会显示一个按钮小图标。

再给 AppBar 添加一个 actions 参数,它的值是一组小部件,这些小部件会显示在 AppBar 的 actions 这个位置上。先添加一个 IconButton,设置一下它的 onPressed,值是一个空白的函数。再添加一个 icon 参数,值是一个小图标,要显示的小图标是 Icons.more_horiz。

这样在 AppBar 的 actions 位置上就会显示一个按钮小图标。

设置页面顶部应用栏(AppBar)《 Flutter 2:页面结构 》

统计

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

社会化网络

关于

微信订阅号

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