flutter Sliver滑动视图组件
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滑动视图组件的更多相关文章
- 【Flutter学习】基本组件之基本滑动PageView组件
一,概述 PageView 是一个滑动视图列表,它也是继承至 CustomScrollView 的. 二,构造函数 类命构造函数(PageView) PageView 使用场景:创建一个可滚动列表 构 ...
- 【Flutter学习】可滚动组件之ScrollView
一,概述 ScrollView 是一个带有滚动的视图组件. 二,组成部分 ScrollView 由三部分组成: Scrollable - 它监听各种用户手势并实现滚动的交互设计.可滚动Widget都直 ...
- Qt qml pageview 左右滑动分页组件
[先看效果] [下载]http://download.csdn.net/detail/surfsky/8516949 [调用] 分页视图 左右分页滑动列表组件 示例 PageView{ id: pv ...
- Flutter 中那么多组件,难道要都学一遍?
在 Flutter 中一切皆是 组件,仅仅 Widget 的子类和间接子类就有 350 多个,整理的 Flutter组件继承关系图 可以帮助大家更好的理解学习 Flutter,回归正题,如此多的组件到 ...
- ASP.NET Core 中文文档 第四章 MVC(3.9)视图组件
作者: Rick Anderson 翻译: 娄宇(Lyrics) 校对: 高嵩 章节: 介绍视图组件 创建视图组件 调用视图组件 演练:创建一个简单的视图组件 附加的资源 查看或下载示例代码 介绍视图 ...
- asp.net core视图组件(ViewComponent)简单使用
一.组成: 一个视图组件包括两个部分,派生自ViewComponent的类及其返回结果.类似控制器. 定义一个视图组件,如控制器一样,必须是公开,非嵌套,非抽象的类.一般,视图组件名称为类名去掉&qu ...
- Slider( 滑动条) 组件
本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个组件依赖于Draggable(拖动)组件. 一. 加载方式//class 加载方式<input class=" ...
- ASP.NET Core MVC之ViewComponents(视图组件)
前言 大概一个来星期未更新博客了,久违了各位,关于SQL Server性能优化会和ASP.NET Core MVC穿插来讲,如果你希望我分享哪些内容可以在评论下方提出来,我会筛选并看看技术文档来对你的 ...
- ASP.NET Core Razor 视图组件
视图组件简介 在新的ASP.NET Core MVC中,视图组件类似于局部视图,但它们更强大.视图组件不使用模型绑定,仅依赖于您在调用时提供的数据. 视图组件特性: 呈现页面响应的某一部分而不是整个响 ...
随机推荐
- HDU-4190-Number Sequence-容斥原理+多重集和的r组合
HDU-4190-Number Sequence-容斥原理+多重集和的r组合 [Problem Description] 给你\(n\)个数\(b_i\),问有多少个长度为\(n\)序列\(a_i\) ...
- ted演讲小总结(持续更新_12月15日)
目录 2019年12月1日 星期日 2019年12月2日 星期一 2019年12月3日 星期二 2019年12月8日 星期日 2019年12月15日 星期日(这个演讲相对来说不好理解,因为这类逻辑暂时 ...
- 「CQOI2015」选数
「CQOI2015」选数 题目描述 我们知道,从区间[L,H](L和H为整数)中选取N个整数,总共有(H-L+1)^N种方案.小z很好奇这样选出的数的最大公约数的规律,他决定对每种方案选出的N个整数都 ...
- 置换及Pólya定理
听大佬们说了这么久Pólya定理,终于有时间把这个定理学习一下了. 置换(permutation)简单来说就是一个(全)排列,比如 \(1,2,3,4\) 的一个置换为 \(3,1,2,4\).一般地 ...
- 分段三次Hermite插值及其与三次样条的比较
分段三次 Hermite 插值多项式 (PCHIP) 语法 p = pchip(x,y,xq) pp = pchip(x,y) 说明 p = pchip(x,y,xq) 返回与 xq 中的查询点对 ...
- Java - 框架之 SpringMVC
一. 简单配置 (XML) 1. web.xml <?xml version="1.0" encoding="UTF-8"?> <web-ap ...
- 3、HDFS架构和YARN架构
HDFS 架构图 HDFS 服务功能 NameNode NameNode是主节点,存储文件的元数据如文件名,文件目录,文件属性(生成时间.副本数.文件权限),以及每个文件的块列表和块所在的DataNo ...
- 180908 input
input while if # -*- coding:utf-8 -*- flag = 0 while flag == 0 : username = input('请输入用户名:\n') passw ...
- TensorflowTensorflow细节-P158-slim的使用
slim的使用 从以下细节可以看出先使用slim = tf.contrib.slim要回用,剩下的看看以下代码就懂了 import tensorflow as tf slim = tf.contrib ...
- SQL Server Default Trace查看是谁对数据库进行了DDL操作
在我们的工作中可能会遇到这样一种情形.由于数据库中某些对象被altered/created/deleted,造成我们的应用程序crash. 当我们把问题解决之后,老板可能会问发生了什么?为什么会这样? ...