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横向使用
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:Extending a logical volume in a virtual machine running Red Hat or Cent OS (1006371)
下一篇:etcd启动报错:couldn't find local name "default" in the initial cluster configuration
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
【Flutter】StatefulWidget 组件 ( PageView 组件 )
一、PageView 组件、二、PageView 组件完整代码示例、三、 相关资源、
Flutter StatefulWidget PageView flutter ico -
Flutter PageView左右滑动切换视图
Flutter PageView左右滑动切换视图
Flutter项目开发 Flutter教程 -
pageView使用(二)
pageView使用(二)注意看实现OnPageChangeListener的注释mainActivity.javaimport android.oewG...
pageview使用 android List ide -
Flutter 登录页面Demo 复制可使用
也许你迷茫,但是我想说,在你迷茫的同时,保持MyApp extends StatelessWidge.
flutter android android studio ide 用户名