以下为授权转载的一盎司科技公众号文章
接下来介绍我的页面,这里主要展示一个个人信息,上部分使用了SizedBox,下部分是一个列表,每个子项使用ListTile等单独构建。以下简单介绍这些控件的使用。
示例代码地址:
GitHub地址:https://github.com/iounce/flutter-wechat
Gitee地址:https://gitee.com/iounce_admin/flutter-wechat
环境
-
Windows操作系统:Windows10(21H2,19044.1766)
-
Android Studio:Giraffe 2022.3.1 Patch 2
-
Flutter: 3.13.0
-
Dart: 3.1.0
-
get: 4.6.6
修改MinePage页
在build函数添加具体界面实现细节,上部分个人信息介绍使用SizedBox控件,内部使用Column及Row等控件,共同组成。需要注意的是拆分行和列,然后使用Container控件分隔空白部分,起到占位的作用。
然后添加单独ListTile子项,也使用Divider分隔相邻控件,实现预期效果。这里ListTile可以单独使用,不用绑定ListView。
效果图
这里还是通过Edge浏览器展示运行效果:
至此,微信底部标签栏的四个页面的布局就构建完毕,总的来说,使用Flutter现有的控件和第三方库,可以很方便的通过编写代码的方式绘制界面。相对于用xml编写界面,各有优劣,习惯了差别其实也是不大。