• 【Flutter】可滚动组件之CustomScrollView


    前言

    CustomScrollView是可以使用Sliver来自定义滚动模型(效果)的组件。它可以包含多种滚动模型,举个例子,假设有一个页面,顶部需要一个GridView,底部需要一个ListView,而要求整个页面的滑动效果是统一的,即它们看起来是一个整体。如果使用GridView+ListView来实现的话,就不能保证一致的滑动效果,因为它们的滚动效果是分离的,所以这时就需要一个"胶水",把这些彼此独立的可滚动组件"粘"起来,而CustomScrollView的功能就相当于“胶水”。

    接口描述

    const CustomScrollView({
        Key key,
        Axis scrollDirection = Axis.vertical,
        bool reverse = false,
        ScrollController controller,
        bool primary,
        ScrollPhysics physics,
        bool shrinkWrap = false,
        Key center,
        double anchor = 0.0,
        double cacheExtent,
        this.slivers = const <Widget>[],
        int semanticChildCount,
        DragStartBehavior dragStartBehavior = DragStartBehavior.start,
      })
    
    const SliverAppBar({
        Key key,
        this.leading,
        this.automaticallyImplyLeading = true,
        this.title,
        this.actions,
        this.flexibleSpace,
        this.bottom,
        this.elevation,
        this.forceElevated = false,
        this.backgroundColor,
        this.brightness,
        this.iconTheme,
        this.actionsIconTheme,
        this.textTheme,
        this.primary = true,
        this.centerTitle,
        this.titleSpacing = NavigationToolbar.kMiddleSpacing,
        this.expandedHeight,
        this.floating = false,
        this.pinned = false,
        this.snap = false,
        this.shape,
      })
    
    

    代码示例

    // CustomScrollView
    
    
    import 'package:flutter/material.dart';
    
    class CustomScrollViewTest extends StatelessWidget{
      @override
      Widget build(BuildContext context){
        // 因为本路由没有使用Scaffold,为了让子级Widget(如Text)使用
        // Material Design 默认的样式风格,我们使用Material作为本路由的根。
        return Material(
          child: CustomScrollView(
            slivers: <Widget>[
              // 类似AppBar,包括一个导航栏,两者不同之处在于SliverAppBar可以集成到CustomScrollView。
              // SliverAppBar可以结合FlexibleSpaceBar实现Material Design中头部伸缩的模型。
              SliverAppBar(
                pinned: true,
                expandedHeight: 250.0,
                flexibleSpace: FlexibleSpaceBar(
                  title: const Text('Demo'),
                  background: Image.asset('assets/images/avatar.png', fit: BoxFit.cover,),
                ),
              ),
    
              // 用SliverPadding包裹以给SliverGrid添加补白。SliverGrid是一个两列,宽高比为4的网格,它有20个子组件。
              SliverPadding(
                padding: const EdgeInsets.all(8.0),
                sliver: SliverGrid(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    // Grid按两列显示
                    crossAxisCount: 2,
                    mainAxisSpacing: 10.0,
                    crossAxisSpacing: 10.0,
                    childAspectRatio: 4.0,
                  ),
                  delegate: SliverChildBuilderDelegate((BuildContext context, int index){
                    // 创建子widget
                    return Container(
                      alignment: Alignment.center,
                      color: Colors.cyan[100*(index%9)],
                      child: Text('grid item $index'),
                    );
                  },
                    childCount: 20,
                  ),
                ),
              ),
    
              // 是一个所有子元素高度都为50像素的列表
              SliverFixedExtentList(
                itemExtent: 50.0,
                delegate: SliverChildBuilderDelegate((BuildContext context, int index){
                  // 创建列表项
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.lightBlue[100*(index%9)],
                    child: Text('list item $index'),
                  );
                },
                  // 50个列表项
                  childCount: 50,
                ),
              )
            ],
          ),
        );
      }
    }
    
    

    总结

    • 头部SliverAppBar:SliverAppBar对应AppBar,两者不同之处在于SliverAppBar可以集成到CustomScrollView。SliverAppBar可以结合FlexibleSpaceBar实现Material Design中头部伸缩的模型,具体效果。
    • 中间的SliverGrid:它用SliverPadding包裹以给SliverGrid添加补白。SliverGrid是一个两列,宽高比为4的网格,它有20个子组件。
    • 底部SliverFixedExtentList:它是一个所有子元素高度都为50像素的列表。
  • 相关阅读:
    Hexo+Github 搭建一个自己的博客
    vue中sessionStorage存储的用法和问题
    vue 页面刷新
    vue渲染完页面后div滚动条定位在底部
    vue 定义全局函数
    vue filter过滤器用法
    vue中bus.$on事件被多次绑定
    vue中引入jQuery的方法
    vue2.0传值方式:父传子、子传父、非父子组件、路由跳转传参
    vue打包后显示为空白页的解决办法
  • 原文地址:https://www.cnblogs.com/parzulpan/p/12195458.html
Copyright © 2020-2023  润新知