Flutter之底部导航栏BottomNavigationBar使用详解

Flutter新语言学习记录BottomNavigationBar使用步骤

第一步:定义默认的底部导航栏默认选中下标和界面列表集合

Flutter之底部导航栏BottomNavigationBar使用详解_第1张图片

第二步:底部导航栏 BottomNavigationBar的选项卡初始化

Flutter之底部导航栏BottomNavigationBar使用详解_第2张图片

第三步:定义选项卡点击切换方法

首页界面代码如下:

Flutter之底部导航栏BottomNavigationBar使用详解_第3张图片 信用卡界面代码如下:

Flutter之底部导航栏BottomNavigationBar使用详解_第4张图片

我的界面代码如下:

Flutter之底部导航栏BottomNavigationBar使用详解_第5张图片

至此完成底部导航栏切换功能

效果如下:

Flutter之底部导航栏BottomNavigationBar使用详解_第6张图片

完整代码如下:

Flutter之底部导航栏BottomNavigationBar使用详解_第7张图片Flutter之底部导航栏BottomNavigationBar使用详解_第8张图片Flutter之底部导航栏BottomNavigationBar使用详解_第9张图片

你可能感兴趣的:(知识-记录,Flutter)