Flutter 旋转 CupertinoPicker

Question

有什么方法可以让Flutter中的CupertinoPicker旋转90度吗？这样您就可以水平而不是垂直拾取。 Transform.rotate 不是一个选项，因为这样 Picker 的宽度就会被限制为父窗口小部件的高度。或者有没有什么好的方法可以强制 cupertino picker 比它的父 widget 大？

Answer 1

RotatedBox 小部件怎么样？

RotatedBox(
  quarterTurns: 1,
  child: CupertinoPicker(...),
)

Unlike Transform, which applies a transform just prior to painting, this object applies its rotation prior to layout, which means the entire rotated box consumes only as much space as required by the rotated child.

Answer 2

所以我找到了2个解决方案。首先，您可以使用 RotatedBox。感谢 josxha 的想法。 2.解决方案：做一个完整的自定义picker。因此，如果有人遇到同样的问题，您可以使用我的自定义选择器。代码一团糟，请不要评判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),
              ],
            ),
          );
        }),
      ),
    );
  }
}

Flutter 旋转 CupertinoPicker

Flutter Rotate CupertinoPicker

dart

flutter

cupertinopicker