Flutter中如何联动两个ListWheelScrollView，随首列表更新数据

你的问题出在没有正确监听第一个列表的选中事件，且未通过状态更新触发UI刷新。直接在ListWheelChildBuilderDelegate的builder方法中修改_indexOfSize不仅会导致索引值不准确（builder会频繁调用），而且不会触发组件重建，所以第二个列表的库存数据不会同步更新。

修复步骤： #

1. 用状态变量保存选中的尺寸索引，比如_selectedSizeIndex
2. 给第一个ListWheelScrollView添加onSelectedItemChanged回调，在选中项变化时更新状态
3. 第二个列表直接使用状态变量获取对应库存数据

修改后的完整代码： #

// 先在State类中定义状态变量
int _selectedSizeIndex = 0;

// 然后是你的布局代码
SizedBox(
  height: MediaQuery.of(context).size.height * 0.3,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      SizedBox(
        width: 70,
        child: ListWheelScrollView.useDelegate(
          itemExtent: 50,
          perspective: 0.005,
          diameterRatio: 1.2,
          squeeze: 1.0,
          physics: const FixedExtentScrollPhysics(),
          // 添加选中项变化的回调
          onSelectedItemChanged: (index) {
            setState(() {
              _selectedSizeIndex = index;
            });
          },
          childDelegate: ListWheelChildBuilderDelegate(
            childCount: _sizeAndAvailability.length,
            builder: (context, index) {
              return ScrollWheelTile(
                size: _sizeAndAvailability[index]['size'].toString(),
              );
            },
          ),
        ),
      ),
      const SizedBox(width: 10),
      SizedBox(
        width: 120,
        child: ListWheelScrollView.useDelegate(
          itemExtent: 50,
          perspective: 0.005,
          diameterRatio: 1.2,
          squeeze: 1.0,
          useMagnifier: true,
          physics: const FixedExtentScrollPhysics(),
          childDelegate: ListWheelChildBuilderDelegate(
            childCount: 1,
            builder: (context, index) {
              return Container(
                color: const Color.fromARGB(255, 225, 225, 225),
                child: Text(
                  'In stock: ${_sizeAndAvailability[_selectedSizeIndex]['availability']}',
                ),
              );
            },
          ),
        ),
      ),
    ],
  ),
),

关键说明： #

• onSelectedItemChanged是ListWheelScrollView官方提供的选中项变化回调，只会在用户滚动结束选中新项时触发，比在builder中赋值更准确
• 调用setState会触发组件重建，第二个列表会自动使用更新后的_selectedSizeIndex获取对应库存数据
• 如果第二个列表不需要滚动功能，也可以直接用Container代替ListWheelScrollView，保持样式一致即可

内容的提问来源于stack exchange，提问作者I S