从零开始Flutter版微信APP--我的页之SizedBox

以下为授权转载的一盎司科技公众号文章

---

接下来介绍我的页面，这里主要展示一个个人信息，上部分使用了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编写界面，各有优劣，习惯了差别其实也是不大。