Drawer:在抽屉里使用 ListView, DrawerHeader,ListTile

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

一般在抽屉里面我们都会使用 Drawer 这个小部件 .. 部件里面添加一个 child 属性,设置一下它里面包含的东西 .. 一般它里面会用一个 ListView 部件 ..

先设置一下它的内边距 ... 大小设置成 0 ..

然后添加一个 children 属性,里面是一组 widget .. 先用一个 DrawerHeader ... child 里面是包含的子部件 .. 暂时先用一个 Text ... 设置一下要显示的文字(header) ... 后面再用一个 toUpperCase 把文字变成大写的 ..

这个抽屉上面这块儿就是一个 DrawerHeader ... 修改一下它的背景颜色可以这样 .. 添加一个 decoration ... 值是一个 BoxDecoration ... 里面添加一个 color 属性,颜色是一种浅灰色 ...

下面可以再用一些 ListTile ... 添加一个 ListTile .. 先添加一个 title 属性设置一下标题 ... 标题可以是简单的 Text ... 要显示的文字是 Messages ... 再用一个 textAlign 设置一下文字的对齐方式 TextAlign.right,表示右对齐 ..

在 ListTile 里面,标题的前面或者后面可以再添加点东西 .. 如果想在标题的后面添加点东西可以设置一个 trailing 属性 ... 内容可以是一个小图标 .. 一个 Icon ... 要使用的图标是 Icons.message .. 再用一个 color 设置一下图标的颜色 .. 让它浅一点 .. 下面再用 size 重新设置一下图标的大小 .. 22.0

想在标题的左边添加点东西可以使用 leading 这个属性 ...

暂时我们先用一下这个 trailing ... 在标题的后面添加一个小图标 ..

再复制两份 ListTile ... 修改一下标题文字 ... Favorite ... 再修改一下对应的图标 ...

这个 ListTile 的标题是 Settings ... 要使用的图标是 Icons 里的 settings ...

Drawer:在抽屉里使用 ListView, DrawerHeader,ListTile《 Flutter 移动应用:界面结构 》

统计

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

社会化网络

关于

微信订阅号

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