flutter tab 与pageview的联动使用

 简介: 这个案例用来作为侧边分类列表来制作,使用tab控制pageview的页面,使用了animateToPage有一个动画效果

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class CategoryScreen extends StatefulWidget {
  const CategoryScreen({Key? key}) : super(key: key);

  @override
  State<CategoryScreen> createState() => _CategoryScreenState();
}

class _CategoryScreenState extends State<CategoryScreen> with SingleTickerProviderStateMixin{
  late TabController _tabController;
  late PageController _pageController;
  List _list = [];
  @override
  void initState() {
    for(int i = 0; i < 4; i++){
      _list.add("TabItem $i");
    }
    _pageController = PageController();
    _tabController = TabController(length: _list.length, vsync: this);
    super.initState();
  }
  int currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    final double topPadding = MediaQuery.of(context).padding.top;

    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Column(
          children: [
            SizedBox(height: topPadding),
            Container(
              height: (size.height - topPadding),
              width: size.width,
              color: Colors.grey.withOpacity(0.2),
              child: Row(
                children: [
                  Container(
                    width: 80,
                    padding: EdgeInsets.only(right: 10),
                    decoration:BoxDecoration(
                      color:Colors.white,
                      borderRadius: BorderRadius.only(
                        topRight: Radius.circular(10),
                        bottomRight: Radius.circular(10)
                      )
                    ),
                    alignment: Alignment.topLeft,
                    child: RotatedBox(
                      quarterTurns: 1,
                      child: TabBar(
                        onTap: (value){
                          currentIndex = value;
                          // _pageController.jumpToPage(currentIndex);
                          _pageController.animateToPage(currentIndex, duration: Duration(milliseconds: 500), curve: Curves.easeInOut);
                          setState(() {
                          });
                        },
                        indicatorWeight: 5,
                        isScrollable: true,
                        controller: _tabController,
                        labelColor: Colors.black,
                        unselectedLabelColor: Colors.grey,
                        tabs: List.generate(_list.length, (index){
                          return RotatedBox(
                            quarterTurns: 3,
                            child: Tab(
                              child: Text(_list[index]),
                            ),
                          );
                        }),
                      ),
                    ),
                  ),
                  Container(
                      height: (size.height - topPadding),
                      width: 300,
                      child: PageView.builder(
                        scrollDirection: Axis.vertical,
                        itemCount: _list.length,
                        onPageChanged: (value){
                          _tabController.animateTo(value);
                          setState(() {
                          });
                        },
                        itemBuilder: (_,index){
                          return Container(
                            width: 150,
                            height: 100,
                            color: Colors.blue[index % 9 * 100],
                          );
                        },
                        controller: _pageController,
                      )
                  )
                ],
              )
            )
          ],
        ),
      ),
    );
  }
}