我需要创建下面的效果。我使用VerticalCardPager并对其进行了一些小的更改,以使所有卡片的宽度相等。但我无法获得预期的结果。有人能给予任何实现这一点的想法吗?
VerticalCardPager
的数据
1dkrff031#
VerticalCardPager库需要改进,因为它为所有子对象运行循环,即使它们没有被绘制也会计算。我尝试了不同的方法,并得到了它的工作与以下代码。
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( title: 'Pager Demo', home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key}); @override State createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _upcomingPage = 0; final _pageController = PageController(viewportFraction: 0.6); @override void dispose() { _pageController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final List<String> titles = [ "RED", "YELLOW", "BLACK", "CYAN", "BLUE", "GREY", ]; final List<Widget> images = [ Container( color: Colors.pink[800], ), Container( color: Colors.purple[800], ), Container( color: Colors.black, ), Container( color: Colors.deepOrange[800], ), Container( color: Colors.indigo[800], ), Container( color: Colors.green[800], ), ]; return Scaffold( body: SafeArea( child: Padding( padding: const EdgeInsets.symmetric(horizontal: 12), child: GestureDetector( onVerticalDragEnd: (details) { if ((details.primaryVelocity ?? 0) > 0) { _upcomingPage = (_pageController.page?.toInt() ?? 0) - 1; _pageController.previousPage( duration: const Duration(milliseconds: 300), curve: Curves.linear); } else if ((details.primaryVelocity ?? 0) < 0) { _upcomingPage = (_pageController.page?.toInt() ?? 0) + 1; _pageController.nextPage( duration: const Duration(milliseconds: 300), curve: Curves.linear); } if (_upcomingPage < 0) { _upcomingPage = 0; } if (_upcomingPage == images.length) { _upcomingPage = images.length - 1; } setState(() {}); }, child: PageView.builder( physics: const NeverScrollableScrollPhysics(), scrollDirection: Axis.vertical, controller: _pageController, itemBuilder: (context, index) { final Alignment align; final double heightFactor; if (index < _upcomingPage) { align = Alignment.bottomCenter; heightFactor = 0.3; } else if (index > _upcomingPage) { align = Alignment.topCenter; heightFactor = 0.3; } else { align = Alignment.center; heightFactor = 1; } return Padding( padding: const EdgeInsets.symmetric(vertical: 12), child: FractionallySizedBox( alignment: align, child: AnimatedFractionallySizedBox( duration: const Duration(milliseconds: 300), heightFactor: heightFactor, alignment: align, child: Stack(children: [ // modify your items here. images[index], Center( child: Text( titles[index], style: const TextStyle( fontSize: 24, color: Colors.white), ), ) ]), ), ), ); }, itemCount: images.length, ), ), ), ), ); } }
字符串视频:https://youtu.be/dOg-ZvPrWSY
1条答案
按热度按时间1dkrff031#
VerticalCardPager库需要改进,因为它为所有子对象运行循环,即使它们没有被绘制也会计算。
我尝试了不同的方法,并得到了它的工作与以下代码。
字符串
视频:https://youtu.be/dOg-ZvPrWSY