111.2021-06-17 15_24_06.gif

import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:get/get.dart';

import 'pin_header_logic.dart';
import 'pin_header_state.dart';

class PinHeaderPage extends StatefulWidget {
  @override
  _PinHeaderPageState createState() => _PinHeaderPageState();
}

class _PinHeaderPageState extends State<PinHeaderPage> with SingleTickerProviderStateMixin {
  final PinHeaderLogic logic = Get.put(PinHeaderLogic());
  final PinHeaderState state = Get.find<PinHeaderLogic>().state;
  TabController _tabController;
  EasyRefreshController _refreshController = EasyRefreshController();
  ScrollController _scrollController = ScrollController();
  double appBarTitleOpacity = 0;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    _scrollController.addListener(() {
      double offset = _scrollController.position.pixels;
      if (offset > 250){
        setState(() {
          appBarTitleOpacity = 1;
        });
      }else{
        setState(() {
          appBarTitleOpacity = 0;
        });
      }
    });
  }

  SliverAppBar _buildAppBar() {
    return SliverAppBar(
      title:Text("悬停Header",style: TextStyle(color: Colors.white.withOpacity(appBarTitleOpacity)),),
      pinned: true,
      floating: true,
      snap: true,
      expandedHeight: 350,
      flexibleSpace: FlexibleSpaceBar(
        centerTitle: true,
        background: Image.network(
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp3.itc.cn%2Fq_70%2Fimages03%2F20200703%2Fd57aaf2bbdb94f368055394cae30cd99.jpeg&refer=http%3A%2F%2Fp3.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626492403&t=9ed21fb93de1e52e5397fefbb3109929",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  TabBar _buildTab() {
    return TabBar(
      labelColor: Colors.red,
      controller: _tabController,
      tabs: <Widget>[
        Tab(text: '资讯'),
        Tab(text: '技术'),
      ],
    );
  }

  TabBarView _buildTabView() {
    return TabBarView(
      controller: _tabController,
      children: [
        EasyRefresh(
          enableControlFinishRefresh: true,
          enableControlFinishLoad: true,
          controller: _refreshController,
          onRefresh: () {},
          onLoad: () {},
          child: ListView.builder(
            shrinkWrap: true,
            itemCount: 20,
            itemBuilder: (context, index) => ListTile(
              title: Text("abc"),
            ),
          ),
        ),
        EasyRefresh(
          enableControlFinishRefresh: true,
          enableControlFinishLoad: true,
          controller: _refreshController,
          onRefresh: () {},
          onLoad: () {},
          child: ListView.builder(
            shrinkWrap: true,
            itemCount: 20,
            itemBuilder: (context, index) => ListTile(
              title: Text("123"),
            ),
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: NestedScrollView(
          controller: _scrollController,
      headerSliverBuilder: (context, innerBoxIsScrolled) {
        return [
          _buildAppBar(),
          SliverPersistentHeader(
            delegate: SliverTabBarDelegate(_buildTab(), color: Colors.white),
            pinned: true,
          )
        ];
      },
      body: _buildTabView(),
    ));
  }

  @override
  void dispose() {
    Get.delete<PinHeaderLogic>();
    super.dispose();
  }
}

class SliverTabBarDelegate extends SliverPersistentHeaderDelegate {
  final TabBar widget;
  final Color color;

  const SliverTabBarDelegate(this.widget, {this.color}) : assert(widget != null);

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
      child: widget,
      color: color,
    );
  }

  @override
  bool shouldRebuild(SliverTabBarDelegate oldDelegate) {
    return false;
  }

  @override
  double get maxExtent => widget.preferredSize.height;

  @override
  double get minExtent => widget.preferredSize.height;
}