捆绑两个数据列表以根据滚动选项更新

Question

我的问题是我无法想出如何捆绑两个 ListWheelScrollView 的数据的想法，因此它们正在根据第一个列表的所选值进行更新。

这是两个垂直平行放置的可滚动列表的表示。 在第一个列表中显示了产品尺寸数据。 第二，产品的可用性。

所以问题是找出如何在滚动第一个列表时更新可用性数据。

在这里，我将大小和可用性数据存储到列表中。

final List<Map<String, int>> _sizeAndAvailability = [
    {'size': 15, 'availability': 8},
    {'size': 16, 'availability': 5},
    {'size': 17, 'availability': 6},
    {'size': 18, 'availability': 7},
  ];

我正在尝试根据“大小”数据更新“可用性”数据。 因此，每次当用户选择特定尺码时，“有货”可以为所选“尺码”的索引呈现“可用性”数据。 这就是我试图做的。

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(),
                                childDelegate: ListWheelChildBuilderDelegate(
                                  childCount: _sizeAndAvailability.length,
                                  builder: (context, index) {
                                    _indexOfSize = 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[_indexOfSize]['availability']}'),
                                    );
                                  },
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),

Answer 1

您应该通过其onSelectedItemChanged参数向第一个滚动视图添加回调，更新“可用”数据并调用setState()更新显示。

我认为您不需要第二个列表的可滚动列表，适当对齐的Text就可以了。

当然，以上所有内容都需要使用StatefulWidget 。