flutter滑动隐藏头部

模型代码

dart 复制代码

import 'packagegenerated/l10n.dart';
import 'package:jade/bean/TabTypeMode.dart';
import 'package:jade/customWidget/MyCustomIndicator.dart';
import 'package:jade/experienceStationCreate/MyExpCellBillHistory.dart';
import 'package:jade/utils/JadeColors.dart';
import 'package:util/navigator_util.dart';
import 'package:util/tab/customize_dicator.dart';
import 'package:widget/custom_appbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class MyExpCellBillHistoryMainFirst extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyExpCellBillHistoryMainFirst();
  }
}

class _MyExpCellBillHistoryMainFirst extends State<MyExpCellBillHistoryMainFirst> with TickerProviderStateMixin{

  TabController _tabController;
  List<String> _tabs = ['全部','按产品展示'];

  List<TabTypeMode> _secondTabs = [
    TabTypeMode(type: 0,title: S.current.quanbu),
    TabTypeMode(type: 1,title: '已入账'),
    TabTypeMode(type: 2,title: '服务费')
  ];
  TabController _secondTabController;

  int _type = 0;

  double dx = 0.0;
  double dy = 0.0;
  double containerHeight = 470.w;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(
        initialIndex: 0,
        length: _tabs.length,vsync: this);

    _secondTabController = TabController(
        initialIndex: 0,
        length: _secondTabs.length,vsync: this);

    _tabController.addListener(() {
      setState(() {
        if(_tabController.index == 0){
          _type = 0;
          _secondTabs = [
            TabTypeMode(type: 0,title: S.current.quanbu),
            TabTypeMode(type: 1,title: '已入账'),
            TabTypeMode(type: 2,title: '服务费')
          ];
        }else if(_tabController.index == 1){
          _type = 1;
          _secondTabs = [
            TabTypeMode(type: 0,title: S.current.quanbu),
            TabTypeMode(type: 1,title: '已下架'),
            TabTypeMode(type: 2,title: '进行中')
          ];
        }
        _secondTabController = TabController(
            initialIndex: 0,
            length: _secondTabs.length,vsync: this);
      });
    });

  }

  @override
  void dispose() {
    // TODO: implement dispose
    _tabController.dispose();
    _secondTabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: JadeColors.lightGrey,
      appBar: CustomAppBar(
        backgroundColor: Colors.white,
        iconTheme: IconThemeData(color: Colors.black45),
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios),
          iconSize: 20,
          onPressed: () {
            NavigatorUtil.pop();
          },
        ),
        title: Text(
          '1号格口账单记录',
          style: TextStyle(color: Colors.black),
        ),
        centerTitle: true,
      ),
      body: _scrollListenerView()
    );
  }

_scrollListenerView(){
    return NotificationListener(
        onNotification: (scrollNotification) {
          if (scrollNotification is ScrollUpdateNotification &&
              scrollNotification.depth == 0) {
            // 滚动且是列表滚动的时候
          //  print('滑动偏移量：${scrollNotification.metrics.pixels}');
          }
          return;
        },
        child: Listener(
          onPointerDown: (downPointer){
            dx = downPointer.position.dx;
            dy = downPointer.position.dy;
          },
            onPointerMove: (movePointer) {
              //向下滑动。
              if (movePointer.position.dy - dy > 0) {
                if (movePointer.position.dy - dy > 56) {
                  print('向下滑动');
                  setState(() {
                    if(containerHeight < 470.w){
                      containerHeight += 56;
                      if(containerHeight >= 470.w){
                        containerHeight = 470.w;
                      }
                    }
                  });
                }
              } else {

                if (-(movePointer.position.dy - dy) > 56) {
                  print('向上滑动');
                  setState(() {
                    containerHeight -= 56;
                    if(containerHeight <= 0.0){
                      containerHeight = 0.0;
                    }
                  });
                }
              }
            },
          child: _body(),
        )
    );
  }

  _body(){
    return Column(
      children: [
      AnimatedContainer(
          child: revenueWidget(),
          height: containerHeight,
          duration: Duration(milliseconds: 340),
        ),
        _tabBarView(),
        _secondTabBarView(),
        Expanded(child: _secondTabView())
      ],
    );
  }

  _tabBarView(){
    return Container(
      color: Colors.white,
      child: TabBar(
        isScrollable: false,
        labelPadding: EdgeInsets.symmetric(horizontal: 0),
        indicator: MyCustomIndicator(indicatorColor: JadeColors.blue_19),
        labelColor: Color(0xff333333),
        labelStyle: TextStyle(
          fontSize: 30.sp,
          fontWeight: FontWeight.w600,
        ),
        unselectedLabelColor: JadeColors.grey,
        unselectedLabelStyle: TextStyle(
            fontSize: 30.sp,
            fontWeight: FontWeight.w300
        ),
        indicatorSize: TabBarIndicatorSize.label,
        controller: _tabController,
        tabs: _tabs
            .map((value) => Container(padding: EdgeInsets.symmetric(horizontal: 20.w),child: Text(value))).toList(),
        onTap: (index) {},
      ),
    );
  }

  _secondTabBarView(){
    return Container(
      padding: EdgeInsets.only(top: 30.w),
      color: Colors.transparent,
      alignment: Alignment.centerLeft,
      child: TabBar(
        isScrollable: true,
        labelPadding: EdgeInsets.symmetric(horizontal: 0),
        indicator: MyUnderlineTabIndicator(
            borderSide:
            BorderSide(width: 2, color:  JadeColors.blue_2),
            insets: EdgeInsets.only(bottom: 5)),
        labelColor: Color(0xff333333),
        labelStyle: TextStyle(
          fontSize: 30.sp,
          fontWeight: FontWeight.w600,
        ),
        unselectedLabelColor: JadeColors.grey,
        unselectedLabelStyle: TextStyle(
            fontSize: 30.sp,
            fontWeight: FontWeight.w300
        ),
        indicatorWeight: 20.w,
        indicatorSize: TabBarIndicatorSize.label,
        controller: _secondTabController,
        tabs: _secondTabs
            .map((value) => Container(padding: EdgeInsets.symmetric(horizontal: 20.w),child: Text(value.title))).toList(),
        onTap: (index) {},
      )
    );
  }

  _secondTabView(){
    return TabBarView(
      //physics: const NeverScrollableScrollPhysics(),
        controller: _secondTabController,
        children: _secondTabs.map((value) {
          return MyExpCellBillHistory(type: _type,status: value.type);
        }).toList()
    );
  }
}

头部布局

dart 复制代码

import 'package:jade/configs/PathConfig.dart';
import 'package:jade/homePage/promotion/promotionPost/MyPromotionProfitList.dart';
import 'package:jade/utils/JadeColors.dart';
import 'package:util/navigator_util.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/*
* 列表头部
* */
Widget revenueWidget(){
  return Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(colors: [
        JadeColors.gold_4,
        JadeColors.lightGrey,
      ],begin: Alignment.topCenter, end: Alignment.bottomCenter)),
    child: Container(
      width: double.infinity,
      margin: EdgeInsets.all(20.w),
      padding: EdgeInsets.only(left: 40.w,top: 40.w,right: 40.w,bottom: 30.w),
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage(PathConfig.imageBlackBg), fit: BoxFit.fill)),
      child: ListView(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('已入账金额（元）',style: TextStyle(fontSize: 28.sp,fontWeight: FontWeight.w600,color: JadeColors.gold_3)),
                  SizedBox(height: 20.w),
                  Text('178.00',style: TextStyle(fontSize: 54.sp,fontWeight: FontWeight.bold,color: JadeColors.gold_5)),
                ],
              ),
              GestureDetector(
                child: Container(
                  width: 160.w,
                  height: 60.w,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    gradient: LinearGradient(colors: [
                        JadeColors.gold_6,
                        JadeColors.gold_7,
                      ],begin: Alignment.centerLeft, end: Alignment.centerRight)
                  ),
                  child: Text('去钱包提现',style: TextStyle(color: Colors.black,fontSize: 24.sp,fontWeight: FontWeight.w600)),
                ),
              )
            ],
          ),
          SizedBox(height: 50.w),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text.rich(TextSpan(
                    children: [
                      TextSpan(
                        text: '总收益（元）',
                        style: TextStyle(fontSize: 22.sp,color: JadeColors.grey_18)
                      ),
                      WidgetSpan(
                          alignment: PlaceholderAlignment.middle,
                          child: Image.asset(PathConfig.iconQuestionLinearBlack,width: 50.w,height: 50.w))
                    ]
                  )),
                  Text('188.88',style: TextStyle(fontSize: 34.sp,fontWeight: FontWeight.w600,color: JadeColors.gold_5)),
                ],
              ),
              SizedBox(width: 140.w,),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text.rich(TextSpan(
                      children: [
                        TextSpan(
                            text: '待入账（元）',
                            style: TextStyle(fontSize: 22.sp,color: JadeColors.grey_18)
                        ),
                        WidgetSpan(
                            alignment: PlaceholderAlignment.middle,
                            child: Container(width: 50.w,height: 50.w))
                      ]
                  )),
                  Text('10.00',style: TextStyle(fontSize: 34.sp,fontWeight: FontWeight.w600,color: JadeColors.gold_5)),
                ],
              ),
            ],
          ),
          Container(
            width: double.infinity,
            height: 1,
            margin: EdgeInsets.only(top: 35.w,bottom: 30.w),
            color: JadeColors.gold_8.withOpacity(0.4),
          ),
          Center(
            child: Text.rich(TextSpan(
              children: [
                TextSpan(
                    text: '收益明细',
                    style: TextStyle(color: JadeColors.gold_4,fontSize: 24.sp),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        NavigatorUtil.push(MyPromotionProfitList());
                      }
                ),
                WidgetSpan(
                    alignment: PlaceholderAlignment.middle,
                    child: Container(
                      margin: EdgeInsets.only(left: 10.w,top: 8.w),
                      child: Image.asset(PathConfig.iconNextBlack,width: 10.w,height: 18.w,color: JadeColors.gold_4,),
                    ))],
            ))
          )
        ],
      ),
    ),
  );
}