Flutter實現頂部導航欄功能

2022-07-28 22:05:32

本文範例為大家分享了Flutter實現頂部導航欄的具體程式碼，供大家參考，具體內容如下

import 'package:flutter/material.dart';
class AppBarDemoPage extends StatelessWidget {
  const AppBarDemoPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
    //導航欄的長度
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          title: Text("AppBarDemoPage"),
          backgroundColor: Colors.red,
          centerTitle: true,
          bottom: TabBar(
            // isScrollable: true, //可捲動
            indicatorColor: Colors.blueGrey, //指示器的顏色
            labelColor: Colors.blueGrey, //選中文字顏色
            unselectedLabelColor: Colors.white, //為選中文字顏色
            // indicatorSize: TabBarIndicatorSize.label, //指示器與文字等寬
            tabs: <Widget>[
              Tab(text: "熱門"),
              Tab(text: "推薦"),
              Tab(text: "好友"),
              Tab(text: "動態"),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Container(
              child: Text("hello"),
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第二個tab"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第三個tab"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第四個tab"),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

如果底部導航欄和頂部導航欄同時存在的

在這裡只寫頂部導航欄的實現，底部的可以參照我之前的文章

tabbar導航欄的實現

import 'package:flutter/material.dart';

class CategoryPage extends StatefulWidget {
  CategoryPage({Key key}) : super(key: key);

  @override
  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          title: Row(
            children: <Widget>[
              Expanded(
                child: TabBar(
                  tabs: <Widget>[
                    Tab(text: "精選"),
                    Tab(text: "電影"),
                    Tab(text: "動漫"),
                    Tab(text: "NBA"),
                  ],
                ),
              )
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第一個tab"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第二個tab"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第三個tab"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第四個tab"),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

這麼寫是對導航欄點選做的監聽，實現效果一樣

import 'package:flutter/material.dart';

class NavBarPage extends StatefulWidget {
  NavBarPage({Key key}) : super(key: key);

  @override
  _NavBarPageState createState() => _NavBarPageState();
}

class _NavBarPageState extends State<NavBarPage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    super.initState(); //length為導航欄的個數
    _tabController = new TabController(vsync: this, length: 2);
    _tabController.addListener(() {
      print(_tabController.index);//列印點選的索引
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("NavBar"),
          bottom: TabBar(
            controller: this._tabController,
            tabs: <Widget>[
              Tab(text: "熱銷"),
              Tab(text: "推薦"),
            ],
          ),
        ),
        body: TabBarView(
          controller: this._tabController,
          children: <Widget>[
            Center(child: Text("熱銷")),
            Center(child: Text("推薦"))
          ],
        ));
  }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

Flutter實現頂部導航欄功能

熱門文章