一. Slivers

我们考虑一个这样的布局:一个滑动的视图中包括一个标题视图(HeaderView),一个列表视图(ListView),一个网格视图(GridView)。

我们怎么可以让它们做到统一的滑动效果呢?使用前面的滚动是很难做到的。

Flutter中有一个可以完成这样滚动效果的Widget:CustomScrollView,可以统一管理多个滚动视图。

在CustomScrollView中,每一个独立的,可滚动的Widget被称之为Sliver。

补充:Sliver可以翻译成裂片、薄片,你可以将每一个独立的滚动视图当做一个小裂片。

1.1. Slivers的基本使用

因为我们需要把很多的Sliver放在一个CustomScrollView中,所以CustomScrollView有一个slivers属性,里面让我们放对应的一些Sliver:

SliverList:类似于我们之前使用过的ListView;
SliverFixedExtentList:类似于SliverList,只是可以设置滚动的高度;
SliverGrid:类似于我们之前使用过的GridView;
SliverPadding:设置Sliver的内边距,因为可能要单独给Sliver设置内边距;
SliverAppBar:添加一个AppBar,通常用来作为CustomScrollView的HeaderView;
SliverSafeArea:设置内容显示在安全区域(比如不让齐刘海挡住我们的内容)
我们简单演示一下:SliverGrid+SliverPadding+
SliverSafeArea的组合
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverSafeArea(
sliver: SliverPadding(
padding: EdgeInsets.all(8),
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment(0, 0),
color: Colors.orange,
child: Text("item$index"),
);
},
childCount: 20
),
),
),
)
],
);
}
}

1.2. Slivers的组合使用

这里我使用官方的示例程序,将SliverAppBar+SliverGrid+SliverFixedExtentList做出如下界面:

class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return showCustomScrollView();
} Widget showCustomScrollView() {
return new CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('Coderwhy Demo'),
background: Image(
image: NetworkImage(
"https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg",
),
fit: BoxFit.cover,
),
),
),
new SliverGrid(
gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
return new Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: new Text('grid item $index'),
);
},
childCount: 10,
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return new Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: new Text('list item $index'),
);
},
childCount: 20
),
),
],
);
}
}

原文地址:https://www.jianshu.com/p/310cfd23ba3a

flutter Slivers的更多相关文章

  1. Flutter:Slivers大家族,让滑动视图的组合变得很简单!

     今天呢,我小拉面主要想给大家讲一讲Flutter中的Slivers大家族的使用场景和方法.开发过列表布局的同学们应该对Slivers系列的控件不陌生,或多或少都用过这个库中的控件,来解决复杂的滑动嵌 ...

  2. Flutter之CustomView

    文中所有示例代码请点击: gitee.com/yumi0629/Fl… 今天呢,我小拉面主要想给大家讲一讲Flutter中的 Slivers 大家族的使用场景和方法.开发过列表布局的同学们应该对 Sl ...

  3. CustomScrollView + slivers + SliverAppBar

    import 'package:flutter/material.dart'; void main()=>runApp(MyApp()); class MyApp extends Statele ...

  4. Flutter 布局(十)- ListBody、ListView、CustomMultiChildLayout详解

    本文主要介绍Flutter布局中的ListBody.ListView.CustomMultiChildLayout控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. ListBody ...

  5. Flutter 布局(八)- Stack、IndexedStack、GridView详解

    本文主要介绍Flutter布局中的Stack.IndexedStack.GridView控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Stack A widget that po ...

  6. Flutter 的基本控件

    文本控件 Text 支持两种类型的文本展示,一个是默认的展示单一样式文本 Text,另一个是支持多种混合样式的富文本 Text.rich. 单一样式文本 Text 单一样式文本 Text 的初始化,是 ...

  7. flutter,SliverPersistentHeader实现Tab顶部吸附固定效果

    直接上代码啦 import 'package:flutter/material.dart'; class StickyDemo extends StatefulWidget { @override _ ...

  8. flutter Sliver滑动视图组件

    import 'package:flutter/material.dart'; import './model/post.dart'; class SliverDemo extends Statele ...

  9. Flutter 页面下拉刷新和上拉加载

    flutter_easyrefresh 正如名字一样,EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作,它支持几乎所有的Flutter控件.它的功能与Android的 ...

  10. Flutter样式和布局控件简析(二)

    开始 继续接着分析Flutter相关的样式和布局控件,但是这次内容难度感觉比较高,怕有分析不到位的地方,所以这次仅仅当做一个参考,大家最好可以自己阅读一下代码,应该会有更深的体会. Sliver布局 ...

随机推荐

  1. 【笔记向】RESTful api

    RESTful api 是什么 源自论文:点我,中文版 Representational state transfer: Representational:数据表现形式 state:状态 transf ...

  2. 重新思考 Vue 组件的定义

    重新总结组件的定义 这是官方对组件的定义:组件允许我们将 UI 划分为独立的.可重用的部分,并且可以对每个部分进行单独的思考.在实际应用中,组件常常被组织成层层嵌套的树状结构. 对于 Vue 开发经验 ...

  3. 计算机网络基础06-Email应用

    1 构成组件 邮件客户端 邮件服务器 SMTP协议 Simple Mail Transfer Protocol 1.1 邮件客户端 读写Email消息 和服务器交互,收发消息 1.2 邮件服务器 邮箱 ...

  4. JAVA虚拟机09---垃圾回收---经典垃圾回收器

    1.Serial收集器 1.1简介 Serial收集器是最基础.历史最悠久的收集器,曾经(在JDK 1.3.1之前)是HotSpot虚拟机新生代收集器的唯一选择   1.2使用算法 标记-复制算法 1 ...

  5. PCL PointCloud类型介绍

    1. PCL PointCloud 类型介绍 在 PCL 中,PointT 是基本的点的表示形式,包括 PointXYZ.PointXYZRGB.Normal 等,而 PointCloud 则是存储点 ...

  6. C++练习6 不同参数的传递方式

    当函数的形参是变量时,函数内的操作是只对形参的操作,并不会对实参造成影响 当函数的形参是引用时,在函数内对形参操作的同时也会对实参造成影响 1 #include <iostream> 2 ...

  7. 推荐一款新的自动化测试框架:DrissionPage!

    今天给大家推荐一款基于Python的网页自动化工具:DrissionPage.这款工具既能控制浏览器,也能收发数据包,甚至能把两者合而为一,简单来说:集合了WEB浏览器自动化的便利性和 request ...

  8. 我做的FFmpeg开源C#封装库Sdcb.FFmpeg

    我做的FFmpeg开源C#封装库Sdcb.FFmpeg 写在前面: 该主题为2022年12月份.NET Conf China 2022我的主题,项目地址:https://github.com/sdcb ...

  9. 自己动手从零写桌面操作系统GrapeOS系列教程——5.GrapeOS开发环境测试

    学习操作系统原理最好的方法是自己写一个简单的操作系统. 在上一讲中我们已经安装配置了开发环境,在本讲中我们来测试一下开发环境是否正常. 我们的测试流程如下: 1.在Visual Studio Code ...

  10. LeetCode-429 N叉树的层次遍历

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/n-ary-tree-level-order-traversal著作权归领扣网络所有.商业转载请联 ...