使用颤振怎么实现底部导航栏

　　介绍

这期内容当中小编将会给大家带来有关使用颤振怎么实现底部导航栏,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

程序主结构如下:

使用颤振怎么实现底部导航栏”> </p> <p> 1。在程序主入口文件主要。飞镖添加如下代码<br/> </p> <pre类= import  & # 39;包:颤振/material.dart& # 39;; 　　import  & # 39; bottom_navigation.dart& # 39;; 　　 　　void  main(),=祝辞,runApp (MyApp ()); 　　 　　class  MyApp  extends  StatelessWidget  { 　　,@override 　　,Widget 构建(BuildContext 上下文),{ 　　return  MaterialApp(才能 　　,,,标题:& # 39;Flutter 演示# 39; 　　,,,主题:ThemeData.light (), 　　,,:,BottomNavigationWidget (), 　　,,); 　　,} 　　}

2。创建4个界面,home_page.dart, constant_page.dart, find_page.dart, my_page.dart

home_page。飞镖

import  & # 39;包:颤振/material.dart& # 39;; 　　 　　class  HomePage  extends  StatelessWidget  { 　　,@override 　　,Widget 构建(BuildContext 上下文),{ 　　return 才能;支架( 　　,,,appBar: appBar(标题:文本(& # 39;主页# 39;),), 　　,,,身体:中心( 　　,,,孩子:,文本(& # 39;这是首页& # 39;), 　　,,), 　　,,); 　　,} 　　}

constant_page。飞镖

import  & # 39;包:颤振/material.dart& # 39;; 　　 　　class  ConstantPage  extends  StatelessWidget  { 　　,@override 　　,Widget 构建(BuildContext 上下文),{ 　　return 才能;支架( 　　,,,appBar: appBar(标题:文本(& # 39;ConstantPage& # 39;),), 　　,,,身体:中心( 　　,,,孩子:,文本(& # 39;这是联系人& # 39;), 　　,,), 　　,,); 　　,} 　　}

find_page。飞镖

import  & # 39;包:颤振/material.dart& # 39;; 　　 　　class  FindPage  extends  StatelessWidget  { 　　,@override 　　,Widget 构建(BuildContext 上下文),{ 　　return 才能;支架( 　　,,,appBar: appBar(标题:文本(& # 39;FindPage& # 39;),), 　　,,,身体:中心( 　　,,,孩子:,文本(& # 39;这是发现& # 39;), 　　,,), 　　,,); 　　,} 　　}

my_page。飞镖

import  & # 39;包:颤振/material.dart& # 39;; 　　 　　class  MyPage  extends  StatelessWidget  { 　　,@override 　　,Widget 构建(BuildContext 上下文),{ 　　return 才能;支架( 　　,,,appBar: appBar(标题:文本(& # 39;MyPage& # 39;),), 　　,,,身体:中心( 　　,,,孩子:,文本(& # 39;这是我的& # 39;), 　　,,), 　　,,); 　　,} 　　}

3。创建动态组件BottomNavigationWidget,新建bottom_navigation。飞镖

import  & # 39;包:颤振/material.dart& # 39;; 　　import  & # 39;页/home_page.dart& # 39;; 　　import  & # 39;页/constant_page.dart& # 39;; 　　import  & # 39;页/find_page.dart& # 39;; 　　import  & # 39;页/my_page.dart& # 39;; 　　 　　class  BottomNavigationWidget  extends  StatefulWidget  { 　　 　　,@override 　　,_BottomNavigationWidgetState  createState(),=祝辞,new  _BottomNavigationWidgetState (); 　　} 　　 　　class  _BottomNavigationWidgetState  extends  State< BottomNavigationWidget>, { 　　,final  List list =,列表(); 　　,int  _currentIndex =, 0; 　　,@override 　　,void  initState (), { 　　,列表 　　,,. . add(主页()) 　　,,. . add (ConstantPage ()) 　　,,. . add (FindPage ()) 　　,,. . add (MyPage ()); 　　super.initState才能(); 　　,} 　　 　　,@override 　　,Widget 构建(BuildContext 上下文),{ 　　return 才能;支架( 　　,,,身体:列表(_currentIndex), 　　,,,bottomNavigationBar: bottomNavigationBar ( 　　,,,currentIndex:, _currentIndex, 　　,,,,onTap:, (int 指数){ 　　,,,,,设置状态((),{ 　　,,,,,,_currentIndex =,指数; 　　,,,,,}); 　　,,,,}, 　　,,,,类型:,BottomNavigationBarType.fixed, 　　,,,,项目:,( 　　,,,,,BottomNavigationBarItem ( 　　,,,,,,:图标,图标(Icons.home,颜色:,Colors.blue,), 　　,,,,,,标题:,文本(& # 39;首页& # 39;,风格:,TextStyle(颜色:,Colors.blue)) 　　,,,,,), 　　,,,,,BottomNavigationBarItem ( 　　,,,,,,,:图标,图标(Icons.contacts,颜色:,Colors.blue,), 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

使用颤振怎么实现底部导航栏