Flutter CustomScrollView实现折叠布局+上

标题越长功能越简单系列

image.png

实现的具体效果

实现的具体效果

实现思路：用原生RefreshIndicator实现下拉刷新，CustomScrollView中controller来判断是否滑动到底部

Scaffold(
        /**
         * 外面包裹下拉刷新控件
         * 下拉刷新组件具体属性
         * RefreshIndicator
         *  ({
         *   Key key,
         *   @required this.child,子控件
         *   this.displacement: 40.0, //触发下拉刷新的距离
         *   @required this.onRefresh, //下拉回调方法,方法需要有async和await关键字，没有await，刷新图标立马消失，没有async，刷新图标不会消失
         *   this.color, //进度指示器前景色 默认为系统主题色
         *   this.backgroundColor, //背景色
         *   this.notificationPredicate: defaultScrollNotificationPredicate,
         *   })
         */
        body: RefreshIndicator(
          child:  CustomScrollView(
            primary: false,
            controller: _controller,
            physics: ScrollPhysics(),
            //滑动效果，如阻尼效果等等
//            physics: const BouncingScrollPhysics(),
            slivers: <Widget>[
              getTitle(),//上面的折叠布局
              SliverToBoxAdapter(
                child: Gaps.vGap10,
              ),//就是个间距
              SliverGrid(
                gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 250.0,
                  mainAxisSpacing: 10.0,
                  crossAxisSpacing: 10.0,
                  childAspectRatio: 1.2, //子控件宽高比
                ),
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    //Item的子组件这里就不展示了，就是一个层叠布局
                    return getVideoItem(_sideoEntityList[index], index);
                  },
                  childCount: _sideoEntityList.length,
                ),
              ),
              SliverToBoxAdapter(
                child:  Visibility(
                  child:  Container(
                    padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
                    child:  Center(
                      child:  Text(loadingText),
                    ),
                  ),
                  visible: _provider.isLoadMore,
                ),
              ),//Visibility包裹的文字，根据是否有更多数据显示/隐藏
            ],
          ),
          onRefresh: () {
            //下拉刷新具体操作
            return _RrefreshPull().then((value) {
              print('success');
            }).catchError((error) {
              print('failed');
            });
          },
        ),
      )

ScrollController 控制器的具体实现

ScrollController _controller;
 _controller = ScrollController();
  _controller.addListener(() {
      int offset = _controller.position.pixels.toInt();
      // 如果滑动到底部
      if (_controller.position.pixels == _controller.position.maxScrollExtent) {
        print("滑动到底部");
        if (isLoding) {
         //下拉刷新的具体操作
        }
      }
    });

头部的折叠布局具体实现

 /// 获取标题布局
  Widget getTitle() {
    return new SliverAppBar(
      leading: GestureDetector(
        child: Icon(
          Icons.arrow_back,
         //这里我主要是为了实现夜间模式
          color: isDark ? Colours.bg_color : Colours.dark_bg_color,
        ),
        onTap: () => Navigator.pop(context),
      ),
      //左侧按钮
      elevation: 4,
      //阴影的高度
      forceElevated: true,
      //是否显示阴影
      backgroundColor: isDark ? Colours.dark_bg_color : Colours.bg_color,
      iconTheme: IconThemeData(color: Colors.white, size: 25, opacity: 1),
      primary: true,
      // appbar是否显示在屏幕的最上面，为false是显示在最上面，为true就显示在状态栏的下面
      titleSpacing: 16,
      expandedHeight: 120.0,
      pinned: true,
      //是否固定导航栏，为true是固定，为false是不固定，往上滑，导航栏可以隐藏
      flexibleSpace: FlexibleSpaceBar(
        centerTitle: false,
        titlePadding:
            const EdgeInsetsDirectional.only(start: 50.0, bottom: 12.0),
        title: Text(
          '专项视频课',
          style: new TextStyle(fontSize: 20.0, color: isDark ? Colours.dark_text : Colours.text),
        ),
      ),
    );
  }

GIthub 点我点我 具体实现都在这