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: "動態(tài)"),
? ? ? ? ? ? ],
? ? ? ? ? ),
? ? ? ? ),
? ? ? ? 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"),
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ],
? ? ? ? ? ? ),
? ? ? ? ? ],
? ? ? ? ),
? ? ? ),
? ? );
? }
}

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("推薦"))
? ? ? ? ? ],
? ? ? ? ));
? }
}