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中,视图组件类似于局部视图,但它们更强大.视图组件不使用模型绑定,仅依赖于您在调用时提供的数据. 视图组件特性: 呈现页面响应的某一部分而不是整个响 ...
随机推荐
- Murach ASP.NET 4.5 C# With Visual Studio 2013 翻译
本书由我自己翻译完,省略书中练习部分,练习部分可以阅读原文 本书对新手友好,介绍了Web通讯的基本原理,ASP.NET开发,项目开发所需的各种开发与部署技术, Ajax,与WCF, Web API ...
- awk命令笔记
awk是啥? awk(奥克)是linux中一个强大的分析工具,linux面试必考 [root@rainbol ~]# awk Usage: awk [POSIX or GNU style option ...
- 什么是IAP?如何实现IAP?
发布时间:2008-09-01 来源:computer00 分享到: IAP是In Application Programming的首字母缩写,IAP是用户自己的程序在运行过程中对User F ...
- IO多路复用的作用?
I/O多路复用实际上就是用select, poll, epoll监听多个io对象,当io对象有变化(有数据)的时候就通知用户进程.好处就是单个进程可以处理多个socket.当然具体区别我们后面再讨论, ...
- BlockingCollection<T> 类实现 列队操作
官方文档 为实现 IProducerConsumerCollection<T> 的线程安全集合提供阻塞和限制功能. 通过 BlockingCollection<T> 实现列队调 ...
- (Python) SOAP Web Service (HTTP POST)
功能很强大,可惜只有试用 https://www.example-code.com/python/soap_web_service.asp
- php使用WebUploader做大文件的分块和断点续传
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...
- (8)打鸡儿教你Vue.js
监听属性 监听属性 watch 通过 watch 来响应数据的变化 <div id = "app"> <p style = "font-size:25p ...
- shell脚本编程之变量简介及脚本执行过程
脚本变量简介 变量类型:字符型.数值型.真.假:事先确定数据的存放格式和长度: 变量存放在内存空间: 编译型语言,没有额外的处理逻辑,属于强类型语言: 脚本型语言,可以有解释器控制:所以,可以是弱类型 ...
- [mysql8]新坑哈 更改Mysql 表的大小转换设置lower_case_table_names=1
在安装了8.0.14之后,初始化的时候在my.cnf里设置了lower_case_table_names=1,安装好了之后,启动报错: 1 2 3 4 5 2019-01-28T13:24:24.91 ...