Flutter之TabBar+PageView

Flutter之TabBar+PageView

底部TabBar

class PageViewDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _PageViewDemoState();
}

class _PageViewDemoState extends State<PageViewDemo>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  PageController _pageController = PageController();
  List<String> titles = ["首页", "账单", "我的"];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: titles.length, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 底部
      bottomNavigationBar: Material(
        color: Colors.white,
        child: TabBar(tabs: <Tab>[
          Tab(
            text: titles[0],
          ),
          Tab(
            text: titles[1],
          ),
          Tab(
            text: titles[2],
          ),
        ],
          indicatorColor: Colors.blue,
          indicatorWeight: 5.0,
          controller: _tabController,
          labelColor: Colors.red,
          unselectedLabelColor: Colors.grey,
          onTap: (index){
            _pageController.jumpToPage(index);
          },
        ),
      ),
      body: PageView(
        controller: _pageController,
        children: <Widget>[
          Text(titles[0]),
          Text(titles[1]),
          Text(titles[2])
//          TopPageViewDemo(),
        ],
        onPageChanged: (index){
          _tabController.animateTo(index);
        },
      ),
    );
  }
}

效果图

顶部TabBar

class TopPageViewDemo extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => TopPageViewDemoState();
}

class TopPageViewDemoState extends State<TopPageViewDemo> with SingleTickerProviderStateMixin{
  TabController _tabController;
  PageController _pageController = PageController();
  List<String> titles = ["首页", "我的"];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: titles.length, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }


  @override
  Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("AppBarTitle",style: TextStyle(color: Colors.black),),
          backgroundColor: Colors.white,
          bottom: TabBar(tabs: <Tab>[
            Tab(
              text: titles[0],
            ),
            Tab(
              text: titles[1],
            ),
          ],
          controller: _tabController,
          indicatorColor: Colors.red,
          labelColor: Colors.black,
          unselectedLabelColor: Colors.grey,
          ),
        ),
        body: PageView(
          controller: _pageController,
          children: <Widget>[
            Text(titles[0]),
            Text(titles[1]),
          ],
          onPageChanged: (index){
            _tabController.animateTo(index);
          },
        ),
      );
  }
}

效果图