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. IDEA项目搭建十四——Web站点Controller基类及布局页静态资源设计

    一.简介 站点搭建完成后,编写页面时一般会有如下几个需求 1.嵌套静态页面时有很大一部分通用代码,如css.js这部分可以使用thymeleaf的局部片段代码块组成 2.这些静态资源默认放在程序中,但 ...

  2. mysql数据库表操作-表的主键索引和普通索引

    数据库索引就象书的目录一样,如果在字段上建立了索引,那么以索引列为查询条件时可以加快查询数据的速度.查询数据库,按主键查询是最快的,每个表只能有一个主键列,但是可以有多个普通索引列,主键列要求列的所有 ...

  3. php get接口,并在浏览器中以json格式返回查找到的数据

    php查询数据有6个步骤,分别为: 连接数据库服务器,使用的命令为:mysql_connect("服务器名称","用户名","密码") 选择 ...

  4. 2019年Web前端最新导航(常见前端框架、前端大牛)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 前言 本文列出了很多与前端有关的常见网站.博客.工具等,整体来看比较权威.有些东西已经 ...

  5. SQL Server 2012还原一直卡在ASYNC_IO_COMPLETION浅析

    在SQL Server 2012(11.0.7001.0)下面在还原一个数据库(备份文件40多G大小,实际数据库大小300G),在还原过程中,出现一直等待ASYNC_IO_COMPLETION,如下测 ...

  6. Oracle EBS compile PLD PLL files.

    PLL->PLX:frmcmp_batch module_type=library userid=apps/apps module=$1.pll output_file=$1.plx compi ...

  7. python 函数参数为*和**的作用与区别

    def function(*args):print(args) 中*的作用:表示此时参数为一个元祖. def function(**args):print(args)中**的作用:表示此时参数为一个字 ...

  8. 通过Socket让远程电脑执行脚本

    实现功能: 客户端发送命令,服务器接收命令并执行 服务端: import socketserver, os class MyTCPHandler(socketserver.BaseRequestHan ...

  9. python——函数之装饰器

    1 问题 实际生活中,我们很难一次性就把一个函数代码写得完美无缺.当我们需要对以前的函数添加新功能时,我们应该怎么做? 2 问题解决思路 (1)可以直接修改原来的函数,在函数内直接修改.当我们对多个函 ...

  10. 【算法】LeetCode算法题-Implement strStr

    这是悦乐书的第151次更新,第153篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第10题(顺位题号是28).给定两个任意字符串haystack.needle,返回hay ...