如何同時添加和滾動兩個列表？

Question

我有一個類似於 cupertinoPicker 的可滾動列表。 我需要這樣做，以便我有 2 個列表，一個包含我已經擁有的值，第二個列表包含右側的圖標。 告訴我，如何添加第二個列表並使其在滾動時同時滾動 2 個列表？ 就像我在下面附上的例子一樣。 現在我只有一個帶有值的列表，我需要在右側添加第二個帶有圖標的列表，並使其與主列表一起滾動

揀貨員

class WheelPicker extends StatefulWidget {
  final Function(dynamic) onValueChanged;
  final int? startPosition;
  final double itemSize;
  final double? listHeight;
  final int currentPosition;
  final double? listWidth;
  final FixedExtentScrollController? controller;
  final List<String> list;

  const WheelPicker({
    Key? key,
    required this.onValueChanged,
    required this.currentPosition,
    required this.itemSize,
    this.startPosition,
    this.listHeight,
    this.controller,
    this.listWidth, required this.list,
  }) : super(key: key);

  @override
  State<WheelPicker> createState() => _WheelPickerState();
}

class _WheelPickerState extends State<WheelPicker> {
  FixedExtentScrollController? fixedExtentScrollController;
  int? currentPosition;

  @override
  void initState() {
    super.initState();
    currentPosition = widget.currentPosition;
    fixedExtentScrollController = widget.controller ??
        FixedExtentScrollController(initialItem: currentPosition ?? 0);
  }

  void _listener(int position) {
    setState(() {
      currentPosition = position;
    });
    widget.onValueChanged(currentPosition);
  }

  @override
  Widget build(BuildContext context) {
    return RotatedBox(
      quarterTurns: 0,
      child: SizedBox(
        height: widget.listHeight ?? double.infinity,
        width: widget.listWidth ?? double.infinity,
        child: _getListWheelScrollView(),
      ),
    );
  }

  Widget _getListWheelScrollView() {
    return ListWheelScrollView(
      diameterRatio: 20,
      onSelectedItemChanged: _listener,
      controller: fixedExtentScrollController,
      physics: const FixedExtentScrollPhysics(
        parent: BouncingScrollPhysics(),
      ),
      useMagnifier: true,
      magnification: 1,
      itemExtent: widget.itemSize,
      children: _convertListItems(),
    );
  }

  List<Widget> _convertListItems() {
    List<Widget> children = [
      for (int i = 0; i < widget.list.length; i++) _item(widget.list[i], i),
    ];

    return children;
  }

  Widget _item(String text, int pos) {
    return Align(
      alignment: Alignment.centerLeft,
      child: Container(
        height: 48,
        width: double.infinity,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          border: Border.all(
            color: currentPosition == pos
                ? constants.Colors.white
                : Colors.transparent,
          ),
        ),
        child: Text(
          text,
          style: currentPosition == pos
              ? constants.Styles.smallHeavyTimerTextStyleWhite
              : constants.Styles.smallerBookTextStyleWhite.copyWith(
                  color: constants.Colors.white.withOpacity(0.5),
                ),
        ),
      ),
    );
  }
}

我現在有

需要做

Answer 1

你可以這樣做：

FixedExtentScrollController? fixedExtentScrollController1;
FixedExtentScrollController? fixedExtentScrollController2;

RotatedBox(
      quarterTurns: 0,
      child: SizedBox(
        height: widget.listHeight ?? double.infinity,
        width: widget.listWidth ?? double.infinity,
        child: row(
        children:[
           expanded(
             child: _getListWheelScrollView(fixedExtentScrollController1),
           ),
           expanded(
             child: _getListWheelScrollView(fixedExtentScrollController2),
           ),
        ]
        ),
      ),
    )



    Widget _getListWheelScrollView(FixedExtentScrollController controller) {
    return ListWheelScrollView(
      diameterRatio: 20,
      onSelectedItemChanged: _listener,
      controller: controller,
      physics: const FixedExtentScrollPhysics(
        parent: BouncingScrollPhysics(),
      ),
      useMagnifier: true,
      magnification: 1,
      itemExtent: widget.itemSize,
      children: _convertListItems(),
    );
  }

Answer 2

您可以在主 controller 上添加一個監聽器，然后監聽它的變化並在第二個 controller 上設置 position。

 final ScrollController mainCOntroller = ScrollController();
  final ScrollController secondController = ScrollController();

  @override
  void initState() {
    super.initState();

    mainCOntroller.addListener(() {
      if (mainCOntroller.hasClients && secondController.hasClients) {
        secondController.jumpTo(mainCOntroller.offset);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Row(
      children: [
        Expanded(
          child: ListView.builder(
            controller:mainCOntroller ,
            itemBuilder: (context, index) => Text("main $index"),
          ),
        ),
        Expanded(
          child: ListView.builder(
            controller: secondController,
            itemBuilder: (context, index) => Text("listener $index"),
          ),
        ),
      ],
    ));
  }
}