import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
} class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
} class _HomePageState extends State<HomePage> {
final PageController ctrl = PageController(
viewportFraction: 0.8,
); List<SliderItem> sliders = [];
String activeTag = 'anime';
int currentPage = 0; @override
void initState() {
super.initState();
_query();
ctrl.addListener(() {
int next = ctrl.page.round();
if (currentPage != next) {
setState(() {
currentPage = next;
});
}
});
} _query({String tag = 'anime'}) {
List<SliderItem> s =
data.where((slider) => slider.tag.contains(tag)).toList(); print(s.length);
setState(() {
sliders = s;
activeTag = tag;
});
} @override
Widget build(BuildContext context) {
return Scaffold(
body: PageView.builder(
itemBuilder: (context, int index) {
if (index == 0) {
return _buildTagPage();
} else if (sliders.length >= index) {
bool active = currentPage == index;
return _buildStoryPage(sliders[index - 1], active);
} else {
return Text('Not Data.');
}
},
scrollDirection: Axis.horizontal,
controller: ctrl,
itemCount: sliders.length + 1,
),
);
} _buildButton(String tag) {
Color color = tag == activeTag ? Colors.purple : Colors.white;
return FlatButton(
color: color,
child: Text('#$tag'),
onPressed: () => _query(tag: tag),
);
} Widget _buildTagPage() {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'选择你喜欢的标签: ',
style: Theme.of(context).textTheme.title,
),
_buildButton('anime'),
_buildButton('girl'),
_buildButton('jojo'),
],
),
);
} Widget _buildStoryPage(SliderItem slider, bool active) {
final double blur = active ? 30 : 0;
final double offset = active ? 20 : 0;
final double top = active ? 100 : 200;
return AnimatedContainer(
duration: Duration(milliseconds: 500),
curve: Curves.easeOutQuint,
margin: EdgeInsets.only(top: top, left: 10, right: 10, bottom: 24),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: NetworkImage(slider.img),
fit: BoxFit.cover,
),
boxShadow: [
BoxShadow(
color: Colors.black87,
blurRadius: blur,
offset: Offset(offset, offset),
),
],
),
child: Center(
child: Text(
slider.title,
style: TextStyle(
fontSize: 40,
color: Colors.white,
),
),
),
);
}
} List<SliderItem> data = [
SliderItem(
img: 'https://s2.ax1x.com/2019/07/02/ZJHheP.jpg',
tag: ['anime', 'girl'],
title: 'Anime1',
),
SliderItem(
img: 'https://s2.ax1x.com/2019/07/02/ZJHWLt.jpg',
tag: ['anime', 'girl'],
title: 'Anime2',
),
SliderItem(
img: 'https://s2.ax1x.com/2019/07/02/ZJHRsI.jpg',
tag: ['anime', 'jojo'],
title: 'Anime3',
),
]; class SliderItem {
SliderItem({this.img, this.tag, this.title});
final String img;
final List<String> tag;
final String title;
}

Flutter Demo: PageView横向使用的更多相关文章

  1. Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明

    前言 上一篇文章我们搭建好了 Flutter 的开发环境. Flutter 即学即用--01 环境搭建 这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter. 开发系统:MAC ...

  2. Flutter Demo: 径向菜单动画

    video import 'dart:math'; import 'package:flutter/material.dart'; import 'package:vector_math/vector ...

  3. Flutter中的可滚动列表组件-PageView

    PageVIew,可滚动的视图列表组件,而且每一个子组件的大小都和视图窗口大小一样. 属性: controller -> PageController 用于控制视图页面滚动到的位置 childr ...

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

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

  5. flutter isolate demo

    main.dart import 'package:flutter/material.dart'; import 'package:flutter_isolate/flutter_isolate.da ...

  6. Flutter入门(二)

    * 网格布局 class HomeContent extends StatelessWidget { List<Widget> _getListData() { var tempList ...

  7. Flutter ListView 列表组件

    列表常见的情况: 1.垂直列表 2.垂直图文列表 3.横向列表 4.动态列表 名称 类型 说明 scrollDirection Axis Axis.horizontal 横向列表 Axis.verti ...

  8. Flutter磨砂玻璃效果制作

    Flutter的Fliter Widget 也是非常强大的,它可以制作出你想要的神奇滤镜效果.下面制作一个毛玻璃效果. 这个和以前的写法都一样,所以就直接贴代码了. import 'package:f ...

  9. 为了弄懂Flutter的状态管理, 我用10种方法改造了counter app

    为了弄懂Flutter的状态管理, 我用10种方法改造了counter app 本文通过改造flutter的counter app, 展示不同的状态管理方法的用法. 可以直接去demo地址看代码: h ...

随机推荐

  1. 2021最新WordPress安装教程(一):Centos7安装Apache

    一转眼2020年已经过去了,看网络上很多WordPress的安装教程都比较旧,有些写的不太详细,WordPress是站长最喜欢的一款建站系统,数据统计到2020年为止,WordPress在所有网站的市 ...

  2. P5518 [MtOI2019]幽灵乐团 / 莫比乌斯反演基础练习题

    瞎扯 建议在阅读题解之前欣赏这首由普莉兹姆利巴姐妹带来的的合奏. Q:你参加省选吗?不是说好了考完 NOIP 就退吗. A:对啊. Q:那你学这玩意干啥? A:对啊,我学这玩意干啥? 写这题的动机? ...

  3. 提供读取excel 的方法

    /** * 对外提供读取excel 的方法 * */ public static List<List<Object>> readExcel(String path) throw ...

  4. 【Spring-Security】Re01 入门上手

    一.所需的组件 SpringBoot项目需要的POM依赖: <dependency> <groupId>org.springframework.boot</groupId ...

  5. Web APP和原生 APP的不同

    我们现在手机中的APP,大部分都是混合APP,也就是既用到了原生APP的基础,又用到了Web APP的基础,混合的比例从0%到100%之间不等.更好的了解APP的类型,有助于我们学则合适的测试策略.今 ...

  6. git从安装到多账户操作一套搞定(二)多账户使用

    作者:良知犹存 转载授权以及围观:欢迎添加微信:Allen-Iverson-me-LYN 总述     GIT是当今热门代码管理技术,但是如此火的系统,竟然是大神林纳斯花了两周用C写出来的一个分布式版 ...

  7. spark提交命令 spark-submit 的参数 executor-memory、executor-cores、num-executors、spark.default.parallelism分析

    转载:https://blog.csdn.net/zimiao552147572/article/details/96482120 nohup spark-submit --master yarn - ...

  8. HDU-6703 array (线段树)

    题意 一个长度为n的排列a,\(\forall i\in [1,n] ,1\le a_i \le n\) , m次操作,每次操作: (1,pos),把 \(a_{pos}\) 变为\(a_{pos} ...

  9. 2019牛客暑期多校训练营(第九场)E.All men are brothers(并查集+排列组合)

    题意:现在有n个集合 每个集合大小为1 现在你可以把集合合并m次 每次会告诉你哪个集合合并 让你输出每次从不同的四个集合里各选出四个的组合方案 思路:我们可以想到用并查集模拟集合的合并 对于方案数 我 ...

  10. 最小生成树(MST)Prim算法和Kruskal算法

    刚学完最小生成树,赶紧写写学习的心得(其实是怕我自己忘了) 最小生成树概念:一个有 n 个结点的连通图的生成树是原图的极小连通子图,且包含原图中的所有 n 个结点,并且有保持图连通的最少的边. 就是说 ...