flutter列表常见的两种吸附置顶效果

淩亂°似流年 2022-12-24 04:48 726阅读 0赞

效果一：

![2e750aea1b6c2e33eb81b07104941a70.webp][]

SVID\_20201125\_154558\_1.gif

完整代码代码：

import 'package:flutter/material.dart';
    
    class CustomScrollView1 extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        return CustomScrollView1State();
      }
    }
    
    class CustomScrollView1State extends State<CustomScrollView1>
        with SingleTickerProviderStateMixin {
      List<Widget> _tabs = <Widget>[
        Tab(
          text: "Home",
        ),
        Tab(
          text: "Profile",
        )
      ];
    
      List<Widget> _tabViews = <Widget>[
        Center(child: Text("Home")),
        Center(child: Text("Profile")),
      ];
    
      TabController _tabController;
    
      @override
      void initState() {
        super.initState();
        this._tabController = TabController(length: _tabs.length, vsync: this);
      }
    
      @override
      void dispose() {
        this._tabController.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: CustomScrollView(
            slivers: <Widget>[
              SliverPersistentHeader(
                floating: true,
                pinned: true,
                delegate: SliverCustomHeaderDelegate(
                  collapsedHeight: 43.0,
                  expandedHeight: 220.0,
                  paddingTop: 27.0,
                  coverImgUrl:
                      "http://img1.mukewang.com/5c18cf540001ac8206000338.jpg",
                  title: "练习",
                ),
              ),
              SliverFillRemaining(
                child: TabBarView(
                  controller: this._tabController,
                  children: _tabViews,
                ),
              ),
            ],
          ),
        );
      }
    }
    
    class SliverCustomHeaderDelegate extends SliverPersistentHeaderDelegate {
      final double collapsedHeight;
    
      ///折叠的高度
      final double expandedHeight;
    
      ///展开的高度
      final double paddingTop;
      final String coverImgUrl;
      final String title;
    
      SliverCustomHeaderDelegate({
        this.collapsedHeight,
        this.expandedHeight,
        this.paddingTop,
        this.coverImgUrl,
        this.title,
      });
    
      Color makeStickyHeaderBgColor(shrinkOffset) {
        final int alpha = (shrinkOffset / (this.maxExtent - this.minExtent) * 255)
            .clamp(0, 255)
            .toInt();
        return Color.fromARGB(alpha, 255, 255, 255);
      }
    
      Color makeStickyHeaderTextColor(shrinkOffset, isIcon) {
        if (shrinkOffset <= 50) {
          return isIcon ? Colors.white : Colors.transparent;
        } else {
          final int alpha = (shrinkOffset / (this.maxExtent - this.minExtent) * 255)
              .clamp(0, 255)
              .toInt();
          return Color.fromARGB(alpha, 0, 0, 0);
        }
      }
    
      @override
      Widget build(
          BuildContext context, double shrinkOffset, bool overlapsContent) {
        return Container(
          height: this.maxExtent,
          width: MediaQuery.of(context).size.width,
          child: Stack(
            fit: StackFit.expand,
            children: <Widget>[
              // 背景图
              Container(child: Image.network(this.coverImgUrl, fit: BoxFit.cover)),
              // 收起头部
              Positioned(
                left: 0,
                right: 0,
                top: 0,
                child: Container(
                  color: this.makeStickyHeaderBgColor(shrinkOffset), // 背景颜色
                  child: SafeArea(
                    bottom: false,
                    child: Container(
                      height: this.collapsedHeight,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          IconButton(
                            icon: Icon(
                              Icons.arrow_back_ios,
                              color: this.makeStickyHeaderTextColor(
                                  shrinkOffset, true), // 返回图标颜色
                            ),
                            onPressed: () => Navigator.pop(context),
                          ),
                          Text(
                            this.title,
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.w500,
                              color: this.makeStickyHeaderTextColor(
                                  shrinkOffset, false), // 标题颜色
                            ),
                          ),
                          IconButton(
                            icon: Icon(
                              Icons.share,
                              color: this.makeStickyHeaderTextColor(
                                  shrinkOffset, true), // 分享图标颜色
                            ),
                            onPressed: () {},
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      }
    
      @override
      double get maxExtent => this.expandedHeight;
    
      @override
      double get minExtent => this.collapsedHeight + this.paddingTop;
    
      @override
      bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
        return true;
      }
    }

效果二：

![bb298d28e1ef233af4e786652d08fa10.webp][]

SVID\_20201125\_155856\_1.gif

完整代码:

作者：西湖的鱼  
链接：https://www.jianshu.com/p/3881c8e159fd  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[2e750aea1b6c2e33eb81b07104941a70.webp]: /images/20221120/b937974cc0924679a9523ff212c1b825.png
[bb298d28e1ef233af4e786652d08fa10.webp]: /images/20221120/0ccea123a5cd4168b380da7a7a4af6c9.png