有没有办法把Flutter中的Cupertino选取器旋转90度?这样你就可以水平选取,而不是垂直选取。transform.rotate不是一个选项,因为那样的话,选取器的宽度就被限制在父部件的高度之内。或者有没有什么好办法可以强迫Cupertino选取器大于其父部件?
5uzkadbs1#
RotatedBox小部件怎么样?
RotatedBox( quarterTurns: 1, child: CupertinoPicker(...), )
与仅在绘画之前应用变换的Transform不同,此对象在布局之前应用其旋转,这意味着整个旋转的长方体仅占用旋转的子对象所需的空间。
w6mmgewl2#
所以我找到了两个解决方案。首先,你可以使用一个RotatedBox.thx到josxha来实现这个想法。2.解决方案:做一个完整的自定义选择器。所以如果任何人有同样的问题,你可以使用我的自定义选择器。代码是一个总的混乱,请不要判断lmao。
class CustomPicker extends StatefulWidget { CustomPicker( {@required double this.width, @required double this.height, @required double this.containerWidth, @required double this.containerHeight, @required double this.gapScaleFactor, @required List<Widget> this.childrenW, Function(int) this.onSnap}); double width; double height; double containerWidth; double containerHeight; double gapScaleFactor; List<Widget> childrenW; Function(int) onSnap; _CustomPicker createState() => _CustomPicker(width, height, containerWidth, containerHeight, gapScaleFactor, childrenW, onSnap); } class _CustomPicker extends State<CustomPicker> with SingleTickerProviderStateMixin { AnimationController controller; double width; double height; double containerWidth; double containerHeight; double gapScaleFactor; double currentScrollX = 0; double oldAnimScrollX = 0; double animDistance = 0; int currentSnap = 0; List<Widget> childrenW; List<Positioned> scrollableContainer = []; final Function(int) onSnap; int currentPos; _CustomPicker( double this.width, double this.height, double this.containerWidth, double this.containerHeight, double this.gapScaleFactor, List<Widget> this.childrenW, Function(int) this.onSnap) { initController(); init(); } void initController() { controller = AnimationController( vsync: this, duration: Duration(milliseconds: 200), lowerBound: 0, upperBound: 1, )..addListener(() { setState(() { currentScrollX = oldAnimScrollX + controller.value * animDistance; init(); }); }); } void init() { scrollableContainer.clear(); if (currentScrollX < 0) { currentScrollX = 0; } double scrollableLength = (containerWidth + containerWidth * gapScaleFactor) * (childrenW.length) - containerWidth * gapScaleFactor; if (currentScrollX > scrollableLength - containerWidth) { currentScrollX = scrollableLength - containerWidth; } for (int i = 0; i < childrenW.length; i++) { double leftPos = width / 2 - containerWidth / 2 - currentScrollX + containerWidth * i + containerWidth * gapScaleFactor * i; double mid = width / 2 - containerWidth / 2; double topPos = containerHeight * 0.9 * ((leftPos - mid).abs() / scrollableLength) / 2; scrollableContainer.add(Positioned( //calculate X position left: leftPos, top: topPos, child: Container( height: containerHeight - containerHeight * 0.9 * ((leftPos - mid).abs() / scrollableLength), width: containerWidth - containerWidth * 0.9 * ((leftPos - mid).abs() / scrollableLength), child: childrenW[i], ))); } } void lookForSnappoint() { double distance = 1000000; double animVal = 0; int index = -2032; for (int i = 0; i < scrollableContainer.length; i++) { double snappoint = width / 2 - containerWidth / 2; double currentLeftPos = width / 2 - containerWidth / 2 - currentScrollX + containerWidth * i + containerWidth * gapScaleFactor * i; if ((currentLeftPos - snappoint).abs() < distance) { distance = (currentLeftPos - snappoint).abs(); animVal = currentLeftPos - snappoint; index = i; } } animDistance = animVal; oldAnimScrollX = currentScrollX; controller.reset(); controller.forward(); this.onSnap(index); } @override Widget build(BuildContext context) { return Container( width: widget.width, height: widget.height, child: GestureDetector( onPanUpdate: (DragUpdateDetails dragUpdateDetails) { setState(() { this.currentScrollX -= dragUpdateDetails.delta.dx; init(); }); }, onPanEnd: (DragEndDetails dragEndDetails) { lookForSnappoint(); }, behavior: HitTestBehavior.translucent, child: LayoutBuilder(builder: (context, constraint) { return Container( child: Stack( children: <Widget>[ Stack(children: scrollableContainer), ], ), ); }), ), ); } }
2条答案
按热度按时间5uzkadbs1#
RotatedBox小部件怎么样?
与仅在绘画之前应用变换的Transform不同,此对象在布局之前应用其旋转,这意味着整个旋转的长方体仅占用旋转的子对象所需的空间。
w6mmgewl2#
所以我找到了两个解决方案。首先,你可以使用一个RotatedBox.thx到josxha来实现这个想法。2.解决方案:做一个完整的自定义选择器。所以如果任何人有同样的问题,你可以使用我的自定义选择器。代码是一个总的混乱,请不要判断lmao。