import 'package:flutter/material.dart';
import './model/post.dart'; class SliverDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
// title: Text('NINGHAO'),
// pinned: true,
floating: true,
expandedHeight: 178.0,
flexibleSpace: FlexibleSpaceBar(
title: Text(
'Ninghao Flutter'.toUpperCase(),
style: TextStyle(
fontSize: 15.0,
letterSpacing: 3.0,
fontWeight: FontWeight.w400,
),
),
background: Image.network(
'https://resources.ninghao.net/images/overkill.png',
fit: BoxFit.cover,
),
),
),
SliverSafeArea(
sliver: SliverPadding(
padding: EdgeInsets.all(8.0),
sliver: SliverGridDemo()
),
),
],
),
);
}
} class SliverListDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Padding(
padding: EdgeInsets.only(bottom: 32.0),
child: Material(
borderRadius: BorderRadius.circular(12.0),
elevation: 14.0,
shadowColor: Colors.grey.withOpacity(0.5),
child: Stack(
children: <Widget>[
AspectRatio(
aspectRatio: 16/16,
child: Image.network(
posts[index].imageUrl,
fit: BoxFit.cover,
),
),
Positioned(
top: 32.0,
left: 32.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
posts[index].title,
style: TextStyle(
fontSize: 20.0,
color: Colors.white
),
),
Text(
posts[index].author,
style: TextStyle(
fontSize: 13.0,
color: Colors.white
),
),
],
),
),
],
),
),
);
},
childCount: posts.length,
),
);
}
} class SliverGridDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0,
childAspectRatio: 1.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
child: Image.network(
posts[index].imageUrl,
fit: BoxFit.cover,
),
);
},
childCount: posts.length,
),
);
}
}

post.dart

class Post {
Post({
this.title,
this.author,
this.imageUrl,
this.description,
}); final String title;
final String author;
final String imageUrl;
final String description; bool selected = false;
} final List<Post> posts = [
Post(
title: 'Candy Shop',
author: 'Mohamed Chahin',
description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl: 'https://resources.ninghao.org/images/candy-shop.jpg',
),
Post(
title: 'Childhood in a picture',
author: 'Mohamed Chahin',
description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl: 'https://resources.ninghao.org/images/childhood-in-a-picture.jpg',
),
Post(
title: 'Contained',
author: 'Mohamed Chahin',
description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl: 'https://resources.ninghao.org/images/contained.jpg',
),
Post(
title: 'Dragon',
author: 'Mohamed Chahin',
description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl: 'https://resources.ninghao.org/images/dragon.jpg',
),
Post(
title: 'Free Hugs',
author: 'Mohamed Chahin',
description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl: 'https://resources.ninghao.org/images/free_hugs.jpg',
),
Post(
title: 'Gravity Falls',
author: 'Mohamed Chahin',
description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl: 'https://resources.ninghao.org/images/gravity-falls.png',
),
Post(
title: 'Icecream Truck',
author: 'Mohamed Chahin',
description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl: 'https://resources.ninghao.org/images/icecreamtruck.png',
),
Post(
title: 'keyclack',
author: 'Mohamed Chahin',
description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl: 'https://resources.ninghao.org/images/keyclack.jpg',
),
Post(
title: 'Overkill',
author: 'Mohamed Chahin',
description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl: 'https://resources.ninghao.org/images/overkill.png',
),
Post(
title: 'Say Hello to Barry',
author: 'Mohamed Chahin',
description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl: 'https://resources.ninghao.org/images/say-hello-to-barry.jpg',
),
Post(
title: 'Space Skull',
author: 'Mohamed Chahin',
description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl: 'https://resources.ninghao.org/images/space-skull.jpg',
),
Post(
title: 'The Old Fashioned',
author: 'Mohamed Chahin',
description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl: 'https://resources.ninghao.org/images/the-old-fashioned.png',
),
Post(
title: 'Tornado',
author: 'Mohamed Chahin',
description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl: 'https://resources.ninghao.org/images/tornado.jpg',
),
Post(
title: 'Undo',
author: 'Mohamed Chahin',
description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl: 'https://resources.ninghao.org/images/undo.jpg',
),
Post(
title: 'White Dragon',
author: 'Mohamed Chahin',
description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl: 'https://resources.ninghao.org/images/white-dragon.jpg',
)
];

效果:

flutter Sliver滑动视图组件的更多相关文章

  1. 【Flutter学习】基本组件之基本滑动PageView组件

    一,概述 PageView 是一个滑动视图列表,它也是继承至 CustomScrollView 的. 二,构造函数 类命构造函数(PageView) PageView 使用场景:创建一个可滚动列表 构 ...

  2. 【Flutter学习】可滚动组件之ScrollView

    一,概述 ScrollView 是一个带有滚动的视图组件. 二,组成部分 ScrollView 由三部分组成: Scrollable - 它监听各种用户手势并实现滚动的交互设计.可滚动Widget都直 ...

  3. Qt qml pageview 左右滑动分页组件

    [先看效果] [下载]http://download.csdn.net/detail/surfsky/8516949 [调用] 分页视图 左右分页滑动列表组件 示例 PageView{ id: pv ...

  4. Flutter 中那么多组件,难道要都学一遍?

    在 Flutter 中一切皆是 组件,仅仅 Widget 的子类和间接子类就有 350 多个,整理的 Flutter组件继承关系图 可以帮助大家更好的理解学习 Flutter,回归正题,如此多的组件到 ...

  5. ASP.NET Core 中文文档 第四章 MVC(3.9)视图组件

    作者: Rick Anderson 翻译: 娄宇(Lyrics) 校对: 高嵩 章节: 介绍视图组件 创建视图组件 调用视图组件 演练:创建一个简单的视图组件 附加的资源 查看或下载示例代码 介绍视图 ...

  6. asp.net core视图组件(ViewComponent)简单使用

    一.组成: 一个视图组件包括两个部分,派生自ViewComponent的类及其返回结果.类似控制器. 定义一个视图组件,如控制器一样,必须是公开,非嵌套,非抽象的类.一般,视图组件名称为类名去掉&qu ...

  7. Slider( 滑动条) 组件

    本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个组件依赖于Draggable(拖动)组件. 一. 加载方式//class 加载方式<input class=" ...

  8. ASP.NET Core MVC之ViewComponents(视图组件)

    前言 大概一个来星期未更新博客了,久违了各位,关于SQL Server性能优化会和ASP.NET Core MVC穿插来讲,如果你希望我分享哪些内容可以在评论下方提出来,我会筛选并看看技术文档来对你的 ...

  9. ASP.NET Core Razor 视图组件

    视图组件简介 在新的ASP.NET Core MVC中,视图组件类似于局部视图,但它们更强大.视图组件不使用模型绑定,仅依赖于您在调用时提供的数据. 视图组件特性: 呈现页面响应的某一部分而不是整个响 ...

随机推荐

  1. css Grid布局

    CSS Grid 布局完全指南(图解 Grid 详细教程)https://www.html.cn/archives/8510#prop-grid-gap 5分钟学会 CSS Grid 布局https: ...

  2. 图解TCP/IP笔记

  3. vue 标签页以及标签页赋值

    背景: 使用vue增加了标签页,点击不同标签页传给后端的值不一样,用来做区分,如图: vue代码如下: 使用 form.PageA   form.PageB ,后端接收到的值 first.second ...

  4. test20190802 夏令营NOIP训练18

    今天的题很有难度啊.然而我10:40才看题-- 高一学堂 在美丽的中山纪念中学里面,有一座高一学堂.所谓山不在高,有仙则名:水不在深,有龙则灵.高一学堂,因为有了yxr,就成了现在这个样子 = =. ...

  5. 四.Protobuf3 缺省值

    解析消息时,如果编码消息不包含特定的单数元素,则解析对象中的相应字段将设置为该字段的默认值.这些默认值是特定于类型的: 对于字符串,默认值为空字符串. 对于字节,默认值为空字节. 对于布尔,默认值为f ...

  6. HDFS中DataNode的心跳机制

    DataNode心跳机制的作用讲解了DataNode的三个作用: register:当DataNode启动的时候,DataNode需要将自身的一些信息(hostname, version等)告诉Nam ...

  7. matlab的diff()函数

    diff():求差分 一阶差分 X = [1 1 2 3 5 8 13 21]; Y = diff(X) 结果: Y = 0 1 1 2 3 5 8 X = [1 1 1; 5 5 5; 25 25 ...

  8. go条件变量同步机制

    sync.Cond代表条件变量,需要配置锁才能有用 package main import ( "fmt" "runtime" "sync" ...

  9. CS229开源项目

    斯坦福大学CS 229机器学习备忘单: https://github.com/kaobeixingfu/stanford-cs-229-machine-learning CS229机器学习算法的Pyt ...

  10. Oracle row_number() over() 分析函数--取出最新数据

    语法格式:row_number() over(partition by 分组列 order by 排序列 desc) 一个很简单的例子 1,先做好准备 create table test1( id v ...