Flutter NestedScrollView 标题与 TabBar 和 TabbarView 反弹

问题描述

1. 当我想向上拖动时可以将标题下拉刷新。
2. 标签栏粘性。
3. ListView 可以滑动到另一个页面。

解决方法

100% 自定义小部件。它支持更改标题值，也支持滑动操作。

它实际上不是一个 TabBar 小部件，但它的工作原理完全一样

     import 'package:flutter/material.dart';

import 'dart:math';


class NestedScrolls extends StatefulWidget {
static const   listHeader = ['Pakistan','China','Iran','Turkey'];
  @override
  _NestedScrollsState createState() => _NestedScrollsState();
}

class _NestedScrollsState extends State<NestedScrolls> {
 

var position=0;
  var topHeader;
 Widget? applyWidget() {

   switch(position){
     case 0:
       setState(() {
         topHeader = NestedScrolls.listHeader[0];
       });
       // return widget if user click over pakistan in tab bar
       return grid();
     case 1:
       setState(() {
         topHeader = NestedScrolls.listHeader[1];
       });
       return   list();
     case 2:
       setState(() {
         topHeader = NestedScrolls.listHeader[2];
       });
       return Container(color: Colors.blue,child: Center(child: Text(topHeader),),);
     case 3:
       setState(() {
         topHeader = NestedScrolls.listHeader[3];
       });
       return Container(color: Colors.orange,);


   }



  }
@override
  void initState() {
    // TODO: implement initState
    super.initState();
    //initial header name when activity start first time
     topHeader = NestedScrolls.listHeader[0];
  }
  @override
  Widget build(BuildContext context) {
    topHeader = topHeader;
    return Scaffold(
      // Persistent AppBar that never scrolls
      appBar: AppBar(
        title: Text('AppBar'),elevation: 0.0,body:
           Column(
            children: <Widget>[
              ///header
              Container(
                alignment: Alignment.center,color: Colors.blueGrey,height: 90,child: Text(NestedScrolls.listHeader[position]),/// tabBar
              Container(
                height: 60,width: MediaQuery.of(context).size.width,child: ListView.builder(
                    scrollDirection: Axis.horizontal,itemCount: NestedScrolls.listHeader.length,itemBuilder: (con,index) {
                      return GestureDetector(
                        onTap: () => setState(() {
                          position=index;
                          topHeader = NestedScrolls.listHeader[index];

                        }),child: Padding(
                          padding: const EdgeInsets.symmetric(
                              vertical: 2.0,horizontal: 10),child: Container(alignment: Alignment.center,width: 100,color: topHeader==NestedScrolls.listHeader[index]?Colors.black26:Colors.transparent,child: Text(NestedScrolls.listHeader[index])),);
                    }),///Widget
            Expanded(
                  child: GestureDetector(

                      // onHorizontalDragStart: (left){
                      //    print('left : ${left.localPosition.direction}');
                      // // left.globalPosition.dx
                      //
                      // },onHorizontalDragEnd: (start){
                        print('start : ${start.velocity.pixelsPerSecond.dx}');
                        if((start.velocity.pixelsPerSecond.dx)<-700){
                          if(position<NestedScrolls.listHeader.length-1 && position>=0)
                            setState(() {
                              position=position+1;
                            });


                        }else{}

                      if((start.velocity.pixelsPerSecond.dx)>900){
                        if(position<=NestedScrolls.listHeader.length-1 && position>0)
                          setState(() {
                            position=position-1;
                          });

                        }
                        print(position);
                      },child: applyWidget()),],);
  }

  list() {
    return SingleChildScrollView(scrollDirection: Axis.vertical,child: Container(



              child: Column(children: [
                for(var color in Colors.primaries)
                Container(color: color,height: 100.0)

              ],);
  }

  grid() {
    return  GridView.count(
        padding: EdgeInsets.zero,crossAxisCount: 3,children: Colors.primaries.map((color) {
          return Container(color: color,height: 100.0);
        }).toList(),);
  }
}