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的更多相关文章

  1. 【Flutter学习】页面跳转之SliverAppBar,CustomScrollView,NestedScrollView的使用

    一,flutter SliverAppbar 控件介绍 SliverAppBar “应用栏” 相当于升级版的 appbar 于 AppBar 位置的固定的应用最上面的; 而 SliverAppBar ...

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

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

  3. SliverAppBar 介绍及使用

    SliverAppBar控件可以实现页面头部区域展开.折叠的效果,类似于Android中的CollapsingToolbarLayout.先看下SliverAppBar实现的效果,效果图如下: Sli ...

  4. Flutter 粘合剂CustomScrollView控件

    老孟导读:快乐的51假期结束了,切换为努力模式,今天给大家分享CustomScrollView组件,此组件在以后的项目中会经常用到,CustomScrollView就像一个粘合剂,将多个组件粘合在一起 ...

  5. 【Flutter】可滚动组件之CustomScrollView

    前言 CustomScrollView是可以使用Sliver来自定义滚动模型(效果)的组件.它可以包含多种滚动模型,举个例子,假设有一个页面,顶部需要一个GridView,底部需要一个ListView ...

  6. Flutter: SliverAppBar 应用程序栏与滚动视图集成,以便它可以根据滚动偏移量在高度上变化

    API class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin { @override W ...

  7. CustomScrollView

    body: CustomScrollView( slivers: [ SliverList( delegate: SliverChildBuilderDelegate( (context, int i ...

  8. Flutter之CustomView

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

  9. 08-可滚动Widget

    可滚动Widget ViewPort视口 在Flutter中,术语ViewPort(视口),如无特别说明,则是指一个Widget的实际显示区域.例如,一个ListView的显示区域高度是800像素,虽 ...

随机推荐

  1. 2018-05-14 代码考古-Python3官方教程字典例程

    知乎原链 Data Structures中的第一个例程: >>> tel = {'jack': 4098, 'sape': 4139} >>> tel['guido ...

  2. 【读书笔记】iOS-更新项目前要注意的事情

    在进行永久更改项目的任何现代化操作之前,要问自己几个问题. 1,我还需要返回项目的旧代码吗? 2,我的同事中有没有人无法升级到最新版本的Xcode? 3,  如果我使用了最新的功能,会不会减少用户? ...

  3. mybatis 通过实体类进行查询

    如果使用实体类进行查询, 不管会不会使用到 主键, 都必须设置主键, 才能查询 <select id="selectByAppidAndServerCode" resultM ...

  4. C# 利用PrintDocument定制打印单据

    本文是利用PrintDocument定制打印单据的小例子,仅供学习分享使用,如果不足之处,还请指正. 涉及知识点: PrintDocument :从 Windows 窗体应用程序打印时,定义一种可重用 ...

  5. (办公)Mysql入门

    数据库的操作:1.用 SHOW 显示已有的数据库show databases 2.创建数据库:create database 创建数据库create database db_name3.删除数据库:d ...

  6. codeforces 735C Tennis Championship(贪心+递推)

    Tennis Championship 题目链接:http://codeforces.com/problemset/problem/735/C ——每天在线,欢迎留言谈论. 题目大意: 给你一个 n ...

  7. mysql数据库的基本操作:创建数据库、查看数据库、修改数据库、删除数据库

    本节相关: 创建数据库 查看数据库 修改数据库 删除数据库 首发时间:2018-02-13 20:47 修改: 2018-04-07:考虑到规范化,将所有语法中“关键字”变成大写;以及因为整理“mys ...

  8. PostgreSQL date_trunc() 和timestamp

    timestamp 01.SELECT now()::timestamp + '1 year'; 02.SELECT now()::timestamp + '1 month'; 03.SELECT n ...

  9. (转)Debian 安装与卸载包命令

    1.APT主要命令apt-cache search  ------package 搜索包sudo apt-get install ------package 安装包sudo apt-get remov ...

  10. mssql sqlserver null数据类型专题

    摘要: 下文将详细讲述sql server NULL(空值)的相关知识,如下所示: 实验环境: sql server 2008 R2 NULL(空值)简介: mssql sqlserver null数 ...