美文网首页
NestedScrollView+SliverAppBar+Sl

NestedScrollView+SliverAppBar+Sl

作者: 嗷大喵 | 来源:发表于2021-06-17 15:27 被阅读0次
    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;
    }
    
    

    相关文章

      网友评论

          本文标题:NestedScrollView+SliverAppBar+Sl

          本文链接:https://www.haomeiwen.com/subject/pcycyltx.html