捆綁兩個數據列表以根據滾動選項更新

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 。