用户登录

打开项目 lib 下面的 main.dart,然后打开编辑器的调试功能,按一下这个开始按钮,我已经把一台真实的设备连接到了电脑,所以会在这个真实的设备上运行我们开发的这个 Flutter 应用。

应用启动以后,现在显示的是 TestDemo 这个页面,可以修改一下,在 main.dart 里面,修改一下 initialRoute 的值,换成一个 / ,这个路由地址对应的是 Home 这个小部件。 保存一下文件,如果没有看到修改之后的结果,可以按一下调试功能上的这个刷新按钮。

现在你会看到一组内容列表,可以滚动显示一组内容项目,按一下其中的一个内容项目,打开的就是对应的内容详情页面。

现在这个页面的显示会有一些问题,在页面底部会出现一个警告条。这是因为当前这个页面不能滚动,页面内容超过了设备的屏幕,所以就会显示这个警告条。

回到项目,打开 lib .. demo 目录下面的这个 post_show.dart,这个文件里定义就是内容详情页面上的小部件。

现在页面主体这里用的是一个 Column 小部件,先剪切一下这个小部件内容,然后先添加一个 SingleChildScrollView 小部件。 在这个小部件的 child 属性里面,把刚才剪切的 Column 放进来。

现在我们把内容详情页面的主体内容放在了一个 SingleChildScrollView 小部件里面,这个小部件可以滚动显示它里面的内容。

这样在内容详情页面上就不会显示之前看到的警告条了。 因为页面内容可以滚动显示。

修复内容详情页面的显示问题《 Flutter 移动应用:测试 》

统计

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

社会化网络

关于

微信订阅号

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