Flutter如何實(shí)現(xiàn)底部和頂部導(dǎo)航欄

這篇文章主要講解了“Flutter如何實(shí)現(xiàn)底部和頂部導(dǎo)航欄”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Flutter如何實(shí)現(xiàn)底部和頂部導(dǎo)航欄”吧！

帶文字圖標(biāo)的底部導(dǎo)航欄(使用BottomNavigationBar和BottomNavigationBarItem)來(lái)實(shí)現(xiàn)效果 (可以實(shí)現(xiàn)圖片很文字,可以監(jiān)聽(tīng)點(diǎn)擊改變圖片和文字的顏色)

/*
* BottomNavigationBarItem的一些屬性
          * const BottomNavigationBarItem({
          * 圖標(biāo)
          @required this.icon,
          this.title,//標(biāo)題
          Widget activeIcon,//被選中時(shí)的Icon
           this.backgroundColor,//背景顏色
            })
 * */

實(shí)現(xiàn)核心代碼:

bottomNavigationBar: BottomNavigationBar(
        /// items: List<BottomNavigationBarItem> : 表示需要顯示的底控件個(gè)數(shù)
        items: [
          BottomNavigationBarItem(
          /// 設(shè)置Icon: _selectedIndex 如果選中的是當(dāng)前item icon和文字都需要還
              icon: Image.asset(_selectedIndex == 0
                  ? image_pressed[0]
                  : image_normal[0],
                  ///設(shè)置圖片的寬度和高度   有些圖片很大,防止圖片過(guò)大
                width: 32.0,
                height: 32.0,
              ),
              title: Text(
                titles[0],
                style: TextStyle(
                  color: _selectedIndex == 0
                      ? Color(0xFF46c01b)
                      : Color(0xff999999)
                ),
              ),
          ),

          BottomNavigationBarItem(
            icon: Image.asset(_selectedIndex == 1
                ? image_pressed[1]
                : image_normal[1],
              width: 32.0,
              height: 32.0,
            ),
            title: Text(
              titles[1],
              style: TextStyle(
                  color: _selectedIndex == 1
                      ? Color(0xFF46c01b)
                      : Color(0xff999999)
              ),
            ),
          ),

          BottomNavigationBarItem(
            icon: Image.asset(_selectedIndex == 2
                ? image_pressed[2]
                : image_normal[2],
              width: 32.0,
              height: 32.0,
            ),
            title: Text(
              titles[2],
              style: TextStyle(
                  color: _selectedIndex == 2
                      ? Color(0xFF46c01b)
                      : Color(0xff999999)
              ),
            ),
          ),

          BottomNavigationBarItem(
            icon: Image.asset(_selectedIndex == 3
                ? image_pressed[3]
                : image_normal[3],
              width: 32.0,
              height: 32.0,
            ),
            title: Text(
              titles[3],
              style: TextStyle(
                  color: _selectedIndex == 3
                      ? Color(0xFF46c01b)
                      : Color(0xff999999)
              ),
            ),
          ),
        ],
        //代表BottomNavigationBar 中當(dāng)前選中的是下表是_selectedIndex的BottomNavigationBarItem控件
        currentIndex: _selectedIndex,
        /// 類型 充滿(填充方式)
        type: BottomNavigationBarType.fixed,
        /// 當(dāng)你點(diǎn)擊其中的BottomNavigationBarItem的時(shí)候,會(huì)調(diào)用這個(gè)方法
        onTap: (index){
//          print('你點(diǎn)擊了哪個(gè)按鈕 $index');
          //刷新?tīng)顟B(tài)
          setState(() {
            /// 在點(diǎn)擊方法中改變 選中下標(biāo)
            _selectedIndex = index;
          });
        },
      ),

Scaffold + Appbar + Tabbar + PageView 來(lái)組合實(shí)現(xiàn)效果 實(shí)現(xiàn)頂部 底部導(dǎo)航欄效果(目前不知道怎么實(shí)現(xiàn)這個(gè)點(diǎn)擊變換圖片和文字的顏色)

 核心代碼:

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    ///頂部TABBar的模式
    if (this._type == GYTabBarWidget.TOP_TAB) {
      return Scaffold(
        ///設(shè)置側(cè)邊滑出 drawer, 不需要的可以不設(shè)置 drawer: Scaffold存在的側(cè)滑屬性
        drawer: _drawer,

        /// 設(shè)置懸浮按鈕,不需要的可以不設(shè)置
        floatingActionButton: _floatingActionButton,

        /// 標(biāo)題欄
        appBar: AppBar(
          title: _title,
          backgroundColor: _backgroundColor,

          /// 設(shè)置tabBar空件
          bottom: TabBar(
            ///頂部模式下  tabBar可以滑動(dòng)的模式
            isScrollable: true, //這個(gè)屬性設(shè)置 頂部tabBar是否可以滑動(dòng) 如果不可以 就全部不顯示在一個(gè)屏內(nèi),如果數(shù)量多可能看不見(jiàn)文字
            ///設(shè)置Controller屬性  必須要有控制器 雨pageView的控制器同步
            controller: _tabController,//該導(dǎo)航欄中的 tabBar 設(shè)置一個(gè)控制器

            /// 每一個(gè)tab item 是一個(gè)List<Widget>
            tabs: _tabItems,//設(shè)置需要現(xiàn)實(shí)的 Items

            ///tab底部選中顏色
            indicatorColor: _indicatorColor,
          ),
        ),


        //TabBarView  必須要配合TabController來(lái)使用   這個(gè)TabBar和PageView 組合來(lái)實(shí)現(xiàn)這個(gè)頂部導(dǎo)航欄的效果
        //設(shè)置頁(yè)面主題 pageView 用于承載Tab對(duì)應(yīng)的頁(yè)面
        body: PageView( //pageView
          /// 必須要有控制器 與TabBar的控制器同步
          controller: _pageController,

          ///每一個(gè) tab 對(duì)應(yīng)的頁(yè)面主體，是一個(gè)List<Widget>
          children: _tabViews,
          ///頁(yè)面觸摸作用滑動(dòng)回調(diào)，用于同步tab選中狀態(tài)
          onPageChanged: (index) {
            _tabController.animateTo(index);
          },
        ),
      );
    }

    ///底部TAbBar模式
    return new Scaffold(
      ///設(shè)置側(cè)邊滑出 drawer，不需要可以不設(shè)置
        drawer: _drawer,
        ///設(shè)置懸浮按鍵，不需要可以不設(shè)置
        floatingActionButton: _floatingActionButton,
        ///標(biāo)題欄
        appBar: new AppBar(
          backgroundColor: _backgroundColor,
          title: _title,
        ),
        ///頁(yè)面主體，PageView，用于承載Tab對(duì)應(yīng)的頁(yè)面
        body: new PageView(
          ///必須有的控制器，與tabBar的控制器同步
          controller: _pageController,
          ///每一個(gè) tab 對(duì)應(yīng)的頁(yè)面主體，是一個(gè)List<Widget>
          children: _tabViews,
          onPageChanged: (index) {
            ///頁(yè)面觸摸作用滑動(dòng)回調(diào)，用于同步tab選中狀態(tài)
            _tabController.animateTo(index);
          },
        ),
        ///底部導(dǎo)航欄，也就是tab欄  bottomNavigationBar: Scaffold控件中底部導(dǎo)航欄屬性
        bottomNavigationBar: new Material(
          color: _backgroundColor,
          ///tabBar控件
          child: new TabBar(
            ///必須有的控制器，與pageView的控制器同步
            controller: _tabController,
            ///每一個(gè)tab item，是一個(gè)List<Widget>
            tabs: _tabItems,
            ///tab底部選中條顏色
            indicatorColor: _indicatorColor,
          ),
        ));


  }
}

上述代碼注意:

1.要?jiǎng)?chuàng)建TabController 和PageController 來(lái)監(jiān)聽(tīng) tabbar和PageView的一些滑動(dòng)和同步操作

2.切換時(shí)需要?jiǎng)赢?必須要通過(guò) with SingleTickerProviderStateMixin 實(shí)現(xiàn)動(dòng)畫效果。

3.當(dāng)你切換每個(gè)頁(yè)面的時(shí)候,發(fā)現(xiàn)每次都會(huì)重新調(diào)用initState()方法來(lái)初始化你的頁(yè)面,解決方法:
讓每個(gè)子頁(yè)面

class _TabBarPageFirstState extends State<TabBarPageFirst> with AutomaticKeepAliveClientMixin {
//然后在其中實(shí)現(xiàn)這個(gè)方法 你就會(huì)發(fā)現(xiàn)你的子頁(yè)面不會(huì)每次切換時(shí)都會(huì)重新加載構(gòu)建
@override
  bool get wantKeepAlive => true;
}

Scaffold + Appbar + Tabbar + TabBarView 來(lái)實(shí)現(xiàn)頂部導(dǎo)航欄(目前還不知道點(diǎn)擊怎么變化圖片和文字顏色)

class GYTopTabBarController extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    /// 這里需要使用DefaultTabController來(lái)包裹 ,如果沒(méi)有包裹則使用TabBarView
    /// 會(huì)報(bào)錯(cuò)
    return DefaultTabController(
      length: 8,
      child: Scaffold(
        appBar: AppBar(
          title: Text('DefaultTabBarController'),

          bottom: TabBar(
            isScrollable: true,
            tabs: <Widget>[
               /// 這里可以使用Tab控件 來(lái)時(shí)先圖標(biāo)和文字的效果
               /* Tab: const Tab({
        Key key,
    this.text,
    this.icon,
    this.child,
  })*/
  /// Tab(icon : , title: ),
              Text('111'),
              Text('222'),
              Text('333'),
              Text('444'),
              Text('555'),
              Text('666'),
              Text('777'),
              Text('888'),
            ],
          ),
        ),
            
        body: TabBarView(
          children: <Widget>[
            TabBarPageFirst(),
            TabBarPageSecond(),
            TabBarPageThree(),
            TabBarPageFour(),
            TabBarPageFirst(),
            TabBarPageSecond(),
            TabBarPageThree(),
            TabBarPageFour(),
          ],
        ),
      ),
    );
  }
}

感謝各位的閱讀，以上就是“Flutter如何實(shí)現(xiàn)底部和頂部導(dǎo)航欄”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Flutter如何實(shí)現(xiàn)底部和頂部導(dǎo)航欄這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！