Flutter Demo: PageView横向使用

• video

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;
}