flutter Slivers
一. 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的更多相关文章
- Flutter:Slivers大家族,让滑动视图的组合变得很简单!
今天呢,我小拉面主要想给大家讲一讲Flutter中的Slivers大家族的使用场景和方法.开发过列表布局的同学们应该对Slivers系列的控件不陌生,或多或少都用过这个库中的控件,来解决复杂的滑动嵌 ...
- Flutter之CustomView
文中所有示例代码请点击: gitee.com/yumi0629/Fl… 今天呢,我小拉面主要想给大家讲一讲Flutter中的 Slivers 大家族的使用场景和方法.开发过列表布局的同学们应该对 Sl ...
- CustomScrollView + slivers + SliverAppBar
import 'package:flutter/material.dart'; void main()=>runApp(MyApp()); class MyApp extends Statele ...
- Flutter 布局(十)- ListBody、ListView、CustomMultiChildLayout详解
本文主要介绍Flutter布局中的ListBody.ListView.CustomMultiChildLayout控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. ListBody ...
- Flutter 布局(八)- Stack、IndexedStack、GridView详解
本文主要介绍Flutter布局中的Stack.IndexedStack.GridView控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Stack A widget that po ...
- Flutter 的基本控件
文本控件 Text 支持两种类型的文本展示,一个是默认的展示单一样式文本 Text,另一个是支持多种混合样式的富文本 Text.rich. 单一样式文本 Text 单一样式文本 Text 的初始化,是 ...
- flutter,SliverPersistentHeader实现Tab顶部吸附固定效果
直接上代码啦 import 'package:flutter/material.dart'; class StickyDemo extends StatefulWidget { @override _ ...
- flutter Sliver滑动视图组件
import 'package:flutter/material.dart'; import './model/post.dart'; class SliverDemo extends Statele ...
- Flutter 页面下拉刷新和上拉加载
flutter_easyrefresh 正如名字一样,EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作,它支持几乎所有的Flutter控件.它的功能与Android的 ...
- Flutter样式和布局控件简析(二)
开始 继续接着分析Flutter相关的样式和布局控件,但是这次内容难度感觉比较高,怕有分析不到位的地方,所以这次仅仅当做一个参考,大家最好可以自己阅读一下代码,应该会有更深的体会. Sliver布局 ...
随机推荐
- 集合类再探:不可变类的好处,Collector接口详解,使用内部迭代
集合类再探 注:本文使用的pom依赖见文末. 集合类的基础 - Iterable.Iterator java语言层面支持对实现了Iterable接口的对象使用for-each语句.Iterator可以 ...
- 高仿微信|基于Windows微信实现一个IM即时通讯App
本文干货充足篇幅较长,建议收藏后阅读避免迷路.文末可获取[自动聊天机器人源码和Demo]. 即时通讯IM概述 如果能开发一款即时聊天App,能和微信消息互通,并且只需少许代码量,应该是件非常兴奋的事情 ...
- Oracle 备份与恢复 (Docker部署版)
Oracle 备份与恢复 (Docker部署版) 一,宿主机设置定时备份脚本 1.检查Oracle容器是否正常运行 docker ps 2.进入容器,创建shell脚本 #oracle11g 是容器名 ...
- 基于WebGL的方式使用OpenLayers
1. 引言 在绘制海量数据时,使用GPU进行绘制可有效减少CPU的负载,提升绘制时的速度在浏览器中,可以使用WebGL的方式与GPU交互 OpenLayers是一个常用的GIS相关的JavaScrip ...
- Kotlin学习-类(嵌套类,内部类,数据类,静态类)及类扩展
一般类形式: class Person(var name: String){//构造函数放在类头部 var age = 1 var fulName: String var address = &quo ...
- CMSIS
百度百科-CMSIS CMSIS 编辑 ARM Cortex 微控制器软件接口标准(CMSIS:Cortex Microcontroller Software Interface Standard) ...
- MySQL安装最后一步无响应解决方法
一.卸载及安装 MySQL安装到最后一步就卡住,如图: 卸载原来安装的MySQL1.首先,卸载MySQL:2.然后,删除C盘下(C:\ProgramData\MySQL)文件: 然后重新安装MySQL ...
- python 自动化 代码操作数据库
import pymysql from pymysql import connect con=pymysql.connect(host='localhost',port=3306,database=' ...
- ES6的总结的一些数组、字符串方法
1.数组的方法 unshift() 数组头部添加内容 push() 数组尾部添加内容 pop() 数组尾部删除内容 shift() 数组头部删除内容 sort() 数组排序 a-b 升序 b-a 降序 ...
- psgl
/* Navicat Premium Data Transfer Source Server : postgreSQL Source Server Type : PostgreSQL Source S ...