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. 【代码笔记】Web-JavaScript-JavaScript 类型转换

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. 服务器端使用jstat定位GC问题的有关命令

    jstat命令可以查看堆内存各部分的使用量,以及加载类的数量. 命令的格式如下: jstat    [-命令选项]    [vmid]     [间隔时间/毫秒]      [查询次数]  注意!!! ...

  3. Javascript 对象 - 字符串对象

    字符串对象 字符串对象是JavaScript中比较常见的一种基本数据类型,他封装了一个字符串,并且提供了相应的方法.例如连接字符串.取字符串.分割字符串等.JavaScript中字符串是不可变的,原始 ...

  4. Android为TV端助力 am命令以及hotkey文件的编写

    1.拨打电话:am start -a android.intent.action.CALL -d tel:10086 这里-a表示动作,-d表述传入的数据,还有-t表示传入的类型. 2. 打开一个网页 ...

  5. Quill Editor使用公式

    const katex = require('katex'); const win: any = window; win.katex = katex; 首先,引入katex @import '~kat ...

  6. 【爬虫】使用xpath与lxml移除特定标签

    移除标签的两种方式 可以用xpath定位 for bad in html.xpath(".//table"): bad.getparent().remove(bad) 参考:htt ...

  7. 使用Visual Studio Team Services持续集成(二)——为构建定义属性

    使用Visual Studio Team Services持续集成(二)--为构建定义属性 1.从VSTS帐户进入到Build 2.编辑构建定义并单击Options Description:如果这里明 ...

  8. LeetCode题解之 Intersection of Two Arrays

    1.题目描述 2.问题分析 借助于set来做. 3.代码 class Solution { public: vector<int> intersection(vector<int&g ...

  9. JS学习之路之JavaScript match() 方法

    match() 方法,在字符串内找到相应的值并返回这些值,()内匹配字符串或者正则表达式. 该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置. d ...

  10. 洗礼灵魂,修炼python(63)--爬虫篇—re模块/正则表达式(1)

    爬虫篇前面的某一章了,我们要爬取网站页面源代码的数据,要从中获取到我们想要的数据,是不是感觉很费力,确实费力对吧?那么有没有什么有利的工具来解决这个问题呢?那就是这一篇博文的主题—— 正则表达式简介 ...