如何在 flutter 中使用 CupertinoPicker 创建多级依赖列表（下拉列表）？

Question

根据 serviceAreas 列表，我想返回相应的公交车站。 例如，如果用户在 serviceArea 列表中选择 Oyo，则在第二个 cupertinoPicker 中返回的列表应该是 ibadanBusstop，如果用户在第一个列表中选择 Lagos，则返回应该是 lagosBusstop 列表。

我愿意接受其他方法来完成这项工作，但我不想使用下拉菜单。

class _BookingPageState extends State<BookingPage> {

FixedExtentScrollController scrollController = FixedExtentScrollController();

final List<String> ibadanBusstop = [
'Lead City Bus Stop',
'Olorunsogo Bus Stop',
'Challenge Bus Stop',
'Mokola Bus Stop',
];

final List<String> lagosBusstop = [
'Jibowu Bus Stop',
'Obalende Bus Stop',
];

final List<String> serviceAreas = [
'Lagos',
'Oyo',
];

int ibadanIndex = 0;
int lagosIndex = 0;
int serviceAreaIndex = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
  
  body: SingleChildScrollView(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          height: FraserDimensions.xFlexHeight(context, 24),
        ),
        

        GestureDetector(
          onTap: (() {
            scrollController.dispose();
            scrollController =
                FixedExtentScrollController(initialItem: serviceAreaIndex);
            showCupertinoModalPopup(
              context: context,
              builder: (context) => CupertinoActionSheet(
                actions: [
                  SizedBox(
                    height: FraserDimensions.xFlexHeight(context, 3),
                    child: CupertinoPicker(
                        scrollController: scrollController,
                        itemExtent: 64,
                        onSelectedItemChanged: (index) {
                          setState(() {
                            this.serviceAreaIndex = index;
                          });
                          final item = serviceAreas[index];
                          print(item);
                        },
                        children: serviceAreas
                            .map((e) => Center(
                                  child: Text(
                                    e,
                                    style: FraserTextStyle.textBlack24,
                                  ),
                                ))
                            .toList()),
                  )
                ],
                
              ),
            );
          }),
          child: Container(
            width: FraserDimensions.xFlexWidth(context, 1),
            height: FraserDimensions.xFlexHeight(context, 18),
            decoration: BoxDecoration(
              color: FraserColors.line,
              borderRadius: const BorderRadius.all(
                Radius.circular(24),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 24.0),
                    child: Text(
                      serviceAreas[serviceAreaIndex],
                      style: FraserTextStyle.textGrey16,
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(right: 16.0),
                  child: Icon(
                    Icons.arrow_drop_down_outlined,
                    color: FraserColors.primaryBlack,
                    size: 22,
                  ),
                ),
              ],
            ),
          ),
        ),
        SizedBox(
          height: FraserDimensions.xFlexHeight(context, 64),
        ),

        GestureDetector(
          onTap: (() {
            scrollController.dispose();
            scrollController =
                FixedExtentScrollController(initialItem: ibadanIndex);
            showCupertinoModalPopup(
              context: context,
              builder: (context) => CupertinoActionSheet(
                actions: [
                  SizedBox(
                    height: FraserDimensions.xFlexHeight(context, 3),
                    child: CupertinoPicker(
                        scrollController: scrollController,
                        itemExtent: 64,
                        onSelectedItemChanged: (index) {
                          setState(() {
                            this.ibadanIndex = index;
                          });
                          final item = ibadanBusstop[index];
                          print(item);
                        },
                        children: ibadanBusstop
                            .map((e) => Center(
                                  child: Text(
                                    e,
                                    style: FraserTextStyle.textBlack24,
                                  ),
                                ))
                            .toList()),
                  )
                ],
                
              ),
            );
          }),
          child: Container(
            width: FraserDimensions.xFlexWidth(context, 1),
            height: FraserDimensions.xFlexHeight(context, 18),
            decoration: BoxDecoration(
              color: FraserColors.line,
              borderRadius: const BorderRadius.all(
                Radius.circular(24),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 24.0),
                    child: Text(
                      ibadanBusstop[ibadanIndex],
                      style: FraserTextStyle.textGrey16,
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(right: 16.0),
                  child: Icon(
                    Icons.arrow_drop_down_outlined,
                    color: FraserColors.primaryBlack,
                    size: 22,
                  ),
                ),
              ],
            ),
          ),
        ),  
      ],
    ),
  ),
  
);

}

Answer 1

因为我没有 BookingPage 我无法渲染以检查结果。

但我认为你应该在使用 ibadanBusstop 列表和 lagosBusstop 列表的地方设置一些条件。 因此，您可以根据 serviceAreaIndex 的 position 做出一些决定。 所以说我们正在使用 busStopList 例如。 busStopList = serviceAreaIndex == 0？ 伊巴丹巴士站：拉各斯巴士站；。

这样，决定列表类型的逻辑由条件处理。