/*
* 画廊效果
*缩放ViewPage
* */
class GalleryViewPage extends StatefulWidget {
double viewPageHeight;
GalleryViewPage({
this.viewPageHeight
});
@override
State<StatefulWidget> createState() => _GalleryViewPageState();
}
class _GalleryViewPageState extends BaseState<GalleryViewPage> {
var imgList = [ ];
PageController _pageController;
var _currPageValue = 0.0;
//缩放系数
double _scaleFactor = .8;
@override
void initState() {
super.initState();
_pageController = PageController(viewportFraction: 0.85);
_pageController.addListener(() {
setState(() {
_currPageValue = _pageController.page;
});
});
}
@override
void dispose() {
super.dispose();
_pageController.dispose();
}
@override
Widget build(BuildContext context) {
return onActivityCreate(context);
}
@override
onActivityCreate(BuildContext context) {
// TODO: implement onActivityCreate
return Container(
//height: _height,
child: PageView.builder(
itemBuilder: (context, index) => _buildPageItem(index),
itemCount: 2,
controller: _pageController,
));
}
_buildPageItem(int index) {
Matrix4 matrix4 = Matrix4.identity();
if (index == _currPageValue.floor()) {
//当前的item
var currScale = 1 - (_currPageValue - index) * (1 - _scaleFactor);
var currTrans = widget.viewPageHeight * (1 - currScale) / 2;
matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
..setTranslationRaw(0.0, currTrans, 0.0);
} else if (index == _currPageValue.floor() + 1) {
//右边的item
var currScale =
_scaleFactor + (_currPageValue - index + 1) * (1 - _scaleFactor);
var currTrans = widget.viewPageHeight * (1 - currScale) / 2;
matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
..setTranslationRaw(0.0, currTrans, 0.0);
} else if (index == _currPageValue.floor() - 1) {
//左边
var currScale = 1 - (_currPageValue - index) * (1 - _scaleFactor);
var currTrans = widget.viewPageHeight * (1 - currScale) / 2;
matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
..setTranslationRaw(0.0, currTrans, 0.0);
} else {
//其他,不在屏幕显示的item
matrix4 = Matrix4.diagonal3Values(1.0, _scaleFactor, 1.0)
..setTranslationRaw(0.0, widget.viewPageHeight * (1 - _scaleFactor) / 2, 0.0);
}
return Transform(
transform: matrix4,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: ScreenUtil().setWidth(20)),
child: GuaranteeRemindDetailCardView(),
),
);
}
flutter画廊效果 ViewPage
最新推荐文章于 2024-08-27 09:09:49 发布