CustomScrollView + slivers + SliverAppBar
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: CustomScrollViewTestRoute(),
),
);
}
}
class CustomScrollViewTestRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: const Text('Demo'),
background: Image.network('http://www.ecobentech.com/img/a.jpg',fit: BoxFit.cover,),
),
),
SliverPadding(
padding: const EdgeInsets.all(8.0),
sliver: SliverGrid( //Grid
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, //Grid按两列显示
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
//创建子widget
return new Container(
alignment: Alignment.center,
color: Colors.cyan[100 * (index % 9)],
child: new Text('grid item $index'),
);
},
childCount: 20,
),
),
),
//List
SliverFixedExtentList(
itemExtent: 50.0,
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
//创建列表项
return new Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: new Text('list item $index'),
);
},
childCount: 50 //50个列表项
),
),
],
);
}
}
CustomScrollView + slivers + SliverAppBar的更多相关文章
- 【Flutter学习】页面跳转之SliverAppBar,CustomScrollView,NestedScrollView的使用
一,flutter SliverAppbar 控件介绍 SliverAppBar “应用栏” 相当于升级版的 appbar 于 AppBar 位置的固定的应用最上面的; 而 SliverAppBar ...
- Flutter:Slivers大家族,让滑动视图的组合变得很简单!
今天呢,我小拉面主要想给大家讲一讲Flutter中的Slivers大家族的使用场景和方法.开发过列表布局的同学们应该对Slivers系列的控件不陌生,或多或少都用过这个库中的控件,来解决复杂的滑动嵌 ...
- SliverAppBar 介绍及使用
SliverAppBar控件可以实现页面头部区域展开.折叠的效果,类似于Android中的CollapsingToolbarLayout.先看下SliverAppBar实现的效果,效果图如下: Sli ...
- Flutter 粘合剂CustomScrollView控件
老孟导读:快乐的51假期结束了,切换为努力模式,今天给大家分享CustomScrollView组件,此组件在以后的项目中会经常用到,CustomScrollView就像一个粘合剂,将多个组件粘合在一起 ...
- 【Flutter】可滚动组件之CustomScrollView
前言 CustomScrollView是可以使用Sliver来自定义滚动模型(效果)的组件.它可以包含多种滚动模型,举个例子,假设有一个页面,顶部需要一个GridView,底部需要一个ListView ...
- Flutter: SliverAppBar 应用程序栏与滚动视图集成,以便它可以根据滚动偏移量在高度上变化
API class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin { @override W ...
- CustomScrollView
body: CustomScrollView( slivers: [ SliverList( delegate: SliverChildBuilderDelegate( (context, int i ...
- Flutter之CustomView
文中所有示例代码请点击: gitee.com/yumi0629/Fl… 今天呢,我小拉面主要想给大家讲一讲Flutter中的 Slivers 大家族的使用场景和方法.开发过列表布局的同学们应该对 Sl ...
- 08-可滚动Widget
可滚动Widget ViewPort视口 在Flutter中,术语ViewPort(视口),如无特别说明,则是指一个Widget的实际显示区域.例如,一个ListView的显示区域高度是800像素,虽 ...
随机推荐
- 关于相机拍照获取图片onActivityResult返回data 为null的问题
调用相机拍摄方法 /** * capture new image */ protected void selectPicFromCamera() { if (!EaseCommonUtils.isSd ...
- vue的diff算法
前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时, ...
- 适用于VS C++环境的注释代码段,可以让你的代码被使用时有高可读性的注释
编码时,在对高级语言(C#/VB etc)函数的访问时,经常会有很明确的函数功能提示,参数提示,与返回值提示.微软的VisualStudio C++集成开发环境同样有这样的功能,只是常见开源的代码很少 ...
- java----鲁棒性
所谓“鲁棒性”,是指控制系统在一定(结构,大小)的参数摄动下,维持其它某些性能的特性. Java鲁棒性的特点如下: Java在编译和运行程序时都要对可能出现的问题进行检查,以防止错误的产生. Java ...
- webApi添加视图出现/Index.cshtml”处的视图必须派生自 WebViewPage 或 WebViewPage<TModel>。
是因为webApi Views文件夹下缺乏web.config文件,从mvc项目相同目录拷贝一个web.Config文件放入 删除多余的namespaces 即可 web.config配置如下: &l ...
- c/c++ 标准库 map set 删除
标准库 map set 删除 删除操作 有map如下: map<int, size_t> cnt{{2,22}, {3,33}, {1,11}, {4,44}; 删除方法: 删除操作种类 ...
- Lua无法排序的问题(Key需要是连续的)
排序的Key需要是连续的 local x = {[1]={x=6}, [2]={x=5}, [3]={x=7}, [5]={x=2}, [6]={x=8}, [7]={x=5}} ---从小到大排序 ...
- windowsserver2019系统下载
windowsserver2019系统分为标准版和数据中心版,两个版本和windows2012,2016一样没有64位系统,点击下载windowsserver2019系统.
- LeetCode算法题-Maximum Depth of Binary Tree
这是悦乐书的第164次更新,第166篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第23题(顺位题号是104).给定二叉树,找到它的最大深度.最大深度是从根节点到最远叶节 ...
- February 14th, 2018 Week 7th Wednesday
Love does not dominate, it culitvates. 爱不是羁绊,而是成就. Love should not wipe out everything you are, love ...