flutter SliverPersistentHeader子组件透明度渐变【滑动悬停appbar添加自定义组件的透明度】

在开发flutter悬停头部中,发现一个问题。

我们通常使用SliverAppBar(),去实现悬停的功能,在使用appbar的时候满足不了我们的需求,就需要自定义,

如下:在title中写了一个搜索框的功能,但是我发现在上滑隐藏的时候,icon有渐变效果,包括普通的text都有渐变的效果,像我写的TextField则没有这种效果。

也就是浅入浅出的效果。如图:

flutter SliverPersistentHeader子组件透明度渐变【滑动悬停appbar添加自定义组件的透明度】

return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
       //这是自定义的头部布局 title: Container( child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Expanded( child: Icon( Iconfont.zhiboicon, ), flex:
0, ), Expanded( child: Container( margin: EdgeInsets.fromLTRB(10, 0, 10, 0), child: TextField( style: TextStyle( fontSize: 13, color: ColorKit.hexToColor(‘#979797‘)), decoration: InputDecoration( contentPadding: EdgeInsets.all(5), isCollapsed: true, prefixIcon: Container( margin: EdgeInsets.fromLTRB(10, 0, 5, 0), child: Icon( Iconfont.sousuoicon, size: 15, color: ColorKit.hexToColor(‘#999999‘), ), ), //添加内部左边图标 prefixIconConstraints: BoxConstraints(), fillColor: ColorKit.hexToColor(‘#F6F6F6‘), filled: true, hintText: ‘请输入搜索内容‘, hintStyle: TextStyle(fontSize: 13), border: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide.none, ), ), onChanged: (text) { print(‘onchanged+$text‘); }, onSubmitted: (text) { print(‘onSubmitted+$text‘); }, ), ), flex: 1, ), Expanded( child: Icon( Iconfont.addicon, color: Colors.blue, ), flex: 0, ), ], ), ), pinned: true, floating: true, forceElevated: innerBoxIsScrolled, bottom: PreferredSize( preferredSize: Size(double.infinity, 48), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Expanded( flex: 1, child: Container( // height: 48, child: TabBar( indicatorSize: TabBarIndicatorSize.label, isScrollable: true, controller: _tabController, tabs: _tabbarTitile.map((e) { return Tab( text: e, ); }).toList(), ), )), Expanded( flex: 0, child: Container( margin: EdgeInsets.fromLTRB(10, 0, 10, 0), child: Icon(Iconfont.gengduoicon), )) ], ), ), ), ]; }, body: TabBarView( controller: _tabController, //tabbar控制器 children: _tabbarView, ), );

作为一个flutter都小白,每次遇到问题都喜欢网上找现成的,但是flutter都文章少的可怜。

后来还是下定决定自己研究一下,看了很多文章,这个方法可行,就是单独把头部的布局拿出来用SliverPersistentHeader来实现。

关于SliverPersistentHeader的介绍请看这里:没错是我,点我

“控件当滚动到边缘时根据滚动的距离缩小高度,有点类似 SliverAppBar 的背景效果”

我写的自定义SliverPersistentHeaderDelegate。如果你也是小白,看到这里不是很明白。别担心,我会把整个代码和使用方法写上来的。

上代码:

自己写一个类,然后继承SliverPersistentHeaderDelegate。

写几个常用的入参,比如我写的是传入的child,也就是传入的小部件,这里用PreferredSize,为什么用这个呢,因为这个组件高度是固定的,也就是自己去设置内容的高度。在maxExtent和minExtent中需要获取这个高度。必须是固定高度(我经过好多天研究出来的,可能是知识范围有限,如果有问题,可以帮我指出改正)。 

第二个是islucency,是布尔类型,在外部传入是否滚动时淡入淡出。不知道为啥就写上了,可能是习惯,为了以后有不用这个功能的时候。

第三个是背景颜色。这里单独传入一个背景色。有两种原因,一种是如果直接在child中定义背景色,那么淡入淡出的时候,背景也会虚化。另外一种就是在入参中添加backgroundColor,背景不会虚化,虚化的是内容的小部件,大家也可以看到下面Opacity是嵌套在Container中的。不传参数默认白色,当然这个属性也不会影响小部件自己设置背景色。

import ‘dart:math‘ as math;
import ‘package:flutter/material.dart‘;

class CommonSliverHeaderDelegate extends SliverPersistentHeaderDelegate{
  PreferredSize child;//传入preferredsize组件,因为此组件需要固定高度
  bool islucency;//入参 是否更加滑动变化透明度,true,false
  Color backgroundColor;//需要设置的背景色
  CommonSliverHeaderDelegate({@required this.islucency,@required this.child,this.backgroundColor});

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    double mainHeight = maxExtent - shrinkOffset;//动态获取滑动剩余高度
    return Container(
      color: backgroundColor??Colors.white,
      child: Opacity(
          opacity:islucency==true&&mainHeight!=maxExtent?((mainHeight / maxExtent)*0.5).clamp(0, 1):1,//根据滑动高度隐藏显示
          child: child
      ),
    );
  }

  @override
  // TODO: implement maxExtent
  double get maxExtent => this.child.preferredSize.height;

  @override
  // TODO: implement minExtent
  double get minExtent => this.child.preferredSize.height;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    // TODO: implement shouldRebuild
    return true;
  }

}

 

好,具体的使用:

代码可能有点乱,大家看重点就行。

首先是NestedScrollView组件,然后就直接添加SliverPersistentHeader组件,在组件中的delegate属性中加入咱们自定义的组件CommonSliverHeaderDelegate。

 

return SafeArea(
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[

            SliverPersistentHeader(
                delegate: CommonSliverHeaderDelegate(
                    islucency: true,//需要淡入淡出
                    child:PreferredSize(//这里传入PreferredSize组件,必须是这个,因为咱们自定义中接收到就是这个。
                      preferredSize: Size.fromHeight(60),//定义组件高度,必须写。
                      child: Row(//*发挥
                        children: [
                          Container(
                            padding: EdgeInsets.all(20),
                            alignment: Alignment.center,
                            child: Text(‘sdfsdf‘),
                          ),
                          Container(
                            padding: EdgeInsets.all(20),
                            alignment: Alignment.center,
                            child: Text(‘sdfsdf‘),
                          ),
                          Container(
                            padding: EdgeInsets.all(20),
                            alignment: Alignment.center,
                            child: Icon(Icons.add),
                          ),
                        ],
                      )
                    )
                )),
            SliverPersistentHeader(
                floating: true,
                pinned: true,
                delegate: CommonSliverHeaderDelegate(
                    islucency: false,
                    child:PreferredSize(
                      preferredSize: Size(double.infinity,48),
                      child:Container(
                        child: TabBar(
                          controller: this._tabController,
                          tabs: <Widget>[
                            Tab(text: ‘资讯‘),
                            Tab(text: ‘技术‘),
                          ],
                        ),
                      )
                    )
                )),
            // SliverAppBar(
            //     pinned: true,
            //     floating: true,
            //     bottom: PreferredSize(
            //       preferredSize: Size(double.infinity,48),
            //       child:TabBar(
            //         indicatorPadding: EdgeInsets.all(10),
            //         labelColor: Colors.black,
            //         controller: this._tabController,
            //         tabs: <Widget>[
            //           Tab(text: ‘资讯‘),
            //           Tab(text: ‘技术‘),
            //         ],
            //       ),
            //     )
            // ),
            SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3, crossAxisSpacing: 5, mainAxisSpacing: 3),
              delegate:
                  SliverChildBuilderDelegate((BuildContext context, int index) {
                return Container(
                  color: Colors.primaries[index % Colors.primaries.length],
                );
              }, childCount: 20),
            )
          ];
        },
        body: TabBarView(
          controller: _tabController, //tabbar控制器
          children: <Widget>[
            Scaffold(
              body: Text(‘sdf‘),
            ),
            Text(‘sdf‘),
          ],
        ),
      ),
    );

上效果:

flutter SliverPersistentHeader子组件透明度渐变【滑动悬停appbar添加自定义组件的透明度】

 

此功能到此为止。接下来我会研究tabbar的自定义高度问题,希望大家有什么问题可以和我探讨。

 

SliverAppBar

flutter SliverPersistentHeader子组件透明度渐变【滑动悬停appbar添加自定义组件的透明度】

上一篇:视图:DBA_TAB_PARTITIONS 分区表视图


下一篇:关于uni-app导航栏中 中间大图标的设置