大家好, 今天我们来用Flutter来实现一个Android中的卡片式的ViewPager.
- 代码总数100行. 核心代码60行.
- 阅读时间8分钟.
使用到的Flutter技术为:
- PageView, StatefulWidget, Gradient和Snackbar.
先上效果图.
直接run代码如下图.
PageView正常效果图
点击infinite button切换gradient效果:
PageView Gradient效果图
点击每一个卡片, 跳出SnackBar显示description如下:
全屏SnackBar
感觉很简单对吧. 那我们先回顾一下, 在Android里面我们要实现这样的效果的做法通常是什么样的呢?
- 做一个viewpager.
- 一组Fragment.
- 每个Fragment绑定一个xml.
- 最后填充viewpager.
如果我们用Flutter实现起来就非常简单. 我们来过一下:
- 第一步, 准备我们的images和会在点击时使用在SnackBar的descriptions. 这里我用了我每周五都追的动漫一人之下的几张百度来的图. 什么? 你不知道一人之下? 快去补番!!!
final Listimages = [
'images/wallpapers/wallpaper1.jpg',
'images/wallpapers/wallpaper2.jpg',
'images/wallpapers/wallpaper3.jpg',
];
final List descriptions = [
'不摇碧莲，干翻苍穹',
'周五快到了，准备追更新',
'社会我宝姐，人美路子野',
];
- 做个App, 这里我用了MaterialApp和ThemeData设置为deepOrange.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Gallery Demo',
theme: ThemeData(primarySwatch: Colors.deepOrange),
home: DisplayPage(),
);
}
}
- 做个StatefulWidget, 因为我们想要维护一个_isAddGradient. 通过这个变量我们想通知widget tree变为gradient和非gradient的两种状态.
class DisplayPage extends StatefulWidget {
@override
_DisplayPageState createState() => new _DisplayPageState();
}
class _DisplayPageState extends State<DisplayPage> {
bool _isAddGradient = false;
///
}
- 我们先做一个FloatingActionButton. 这个是Scaffold提供给我们的. 我们用这个button来改变_isAddGradient.
FloatingActionButton _floatingActionButton = FloatingActionButton(
onPressed: () {
_isAddGradient = !_isAddGradient;
setState(() {
_isAddGradient;
});
},
tooltip: 'Switch Gradient Effect',
child: Icon(Icons.all_inclusive),
);
- 做个DecoratedBox, 可以实现我们要的gradient效果. 这里我们用一个LinearGradient. 从bottomRight到topLeft结束.
var decorationBox = DecoratedBox(
decoration: _isAddGradient
? BoxDecoration(
gradient: LinearGradient(
begin: FractionalOffset.bottomRight,
end: FractionalOffset.topLeft,
colors: [
Color(0x00000000).withOpacity(0.9),
Color(0xff000000).withOpacity(0.01),
],
),
)
: BoxDecoration(),
);
- 在_DisplayState的build function返回Scaffold和所有主体逻辑. 这里我们用PageView.builder来建立PageView. 我们给每一个item加上Padding. 加上GestureDetector来实现点击显示SnackBar. 我们在SnackBar的Text上加上Center让它充满全屏.
return Scaffold(
floatingActionButton: _floatingActionButton,
body: Center(
child: SizedBox.fromSize(
size: Size.fromHeight(550.0),
child: PageView.builder(
controller: PageController(viewportFraction: 0.8),
itemCount: images.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: EdgeInsets.symmetric(
vertical: 16.0,
horizontal: 8.0,
),
child: GestureDetector(
onTap: () {
Scaffold.of(context).showSnackBar(SnackBar(
backgroundColor: Colors.deepOrangeAccent,
duration: Duration(milliseconds: 800),
content: Center(
child: Text(
descriptions[index],
style: TextStyle(fontSize: 25.0),
),
),
));
},
child: Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(8.0),
child: Stack(
fit: StackFit.expand,
children: [
Image.asset(
images[index],
fit: BoxFit.cover,
),
decorationBox,
],
),
),
),
);
},
),
),
),
);
- 别忘了在main函数里run下我们的app.
void main() => runApp(MyApp());
好了, 打完收工. 是不是Flutter很简单几行代码我们就实现了Android里的ViewPager了呢?
Source Code下载: 点我去GitHub下载你最爱的源码
欧了, 谢谢观赏，大家加油！
