入坑进行时。。

完整示例代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

import 'package:flutter/material.dart';

class AppIndexPage extends StatefulWidget {
  @override //元数据注解
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<AppIndexPage> with SingleTickerProviderStateMixin {
  TabController _tabcontroller;
  List tabList = ['首页', '更多', '我的'];
  var _selectedIndex = 0;

  @override
  // 生命周期 初始化状态
  void initState(){
    super.initState();
    _tabcontroller = new TabController(vsync: this,length: tabList.length);
  }

  void _onItemTapped(int index){
    setState(() {
      _selectedIndex = index;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar( //导航栏
        title: Text("Demo App"), 
        actions: <Widget>[ //导航栏右侧菜单
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
        bottom: TabBar(
          controller: _tabcontroller,
          tabs: tabList.map((e) => Tab(text:e)).toList(),
        ),
      ),
      bottomNavigationBar:BottomNavigationBar(
          currentIndex: _selectedIndex,
          items: tabList.map((e) => BottomNavigationBarItem(icon:Icon(Icons.home),title:Text(e))).toList(),
          onTap: _onItemTapped,
        ),
    );
  }  
}

过程分解

1. 定义一个控制器 TabController 用于监听 tab菜单切换 并初始化

1
2
3
4
5
6

@override
  void initState(){
    super.initState();
    _tabcontroller = new TabController(vsync: this,length: tabList.length);
  }

2.定义一个 List（数组） 此数组可以为 consts

const和final的区别 final 实例化时生成 const 运行时生成

3.创建一个TabBar widget 用于展示 tabbar

tabbar tabs属性可接受一个Widget数组 可直接生成，也可以使用其他组件。

Widget build(BuildContext context) {}  //生成Widget的页面样式使用此方法 Widget build   
build 中可以返回 widget ，也可以 使用 MaterialApp   

> Material应用程序以MaterialApp widget开始， 该widget在应用程序的根部创建了一些有用的widget，比如一个Theme，它配置了应用的主题。

疑问： 如何在子元素中访问 初始化的应用和层序根部的widget，比如Theme。

Scaffold

Flutter Material库提供了一个Scaffold Widget，它是一个路由页的骨架，可以非常容易的拼装出一个完整的页面。 TabBar和TabBarView的controller是同一个以此来实现菜单切换和滑动状态同步。

4. 使用 Material 组件库提供Meterial风格的 Tab菜单

5.BottomNavigationBar 同理

参考文档