用户登录

下面先准备一个新的页面,在上面可以练习使用 Flutter 提供的各种组件。打开 app.dart,可以先把页面上的这个 floatingActionButton 注释掉。

然后打开 app_page_bottom.dart 小部件,在 BottomNavigationBar 里面再添加一个新的项目,复制一份这个 BottomNavigationBarItem 小部件,设置一下底部导航项目的小图标,Icons.sports_volleyball ,label 属性的值设置成 练习。

添加了新的底部导航项目以后,你会发现底部导航的这些项目会有一些变化,这里我们需要再配置一下这个底部导航栏,先添加一个 unselectedItemColor,值设置成 Colors.black。再添加一个 selectedItemColor,值是 Colors.deepPurpleAccent,然后把 showUnselectedLabels  设置成 true ,再把 type 设置成 BottomNavigationBarType.fixed。现在,在底部导航栏的下面会多出一个新的项目。

点按这个项目可以打开一个新的页面,下面再去创建一个新的页面小部件,把它放在 lib/playground 里面,名字是 playground.dart。在这个文件里创建一个 StatelessWidget,名字是 Playground。

打开 app_page_main.dart,在这个小部件的 pageMain 里面,再添加一个新的项目,名字是 Playground 这个小部件。现在点按应用底部导航栏上的这个 练习 项目,显示的就是 Playground 这个小部件。

这组训练我们要练习的是 Flutter 的布局相关的东西,可以再去创建一个小部件,放在 lib/playground/layout 里面,文件的名字是 playground_layout.dart。

在这个文件里新建一个 StatelessWidget,小部件的名字叫 PlaygroundLayout。然后打开 playground.dart,这个小部件 return 的东西,可以新建一个 PlaygroundLayout 小部件。

这样点按底部导航栏里的练习这个项目的时候,页面上会显示 PlaygroundLayout 小部件里的东西。

准备练习页面小部件《 Flutter 2:界面布局 》

统计

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

社会化网络

关于

微信订阅号

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