Flutter之底部自定义弹框➕CupertinoPicker选择器做二级选择器+界面更新

以下是一个简化的代码示例，展示了如何在Flutter中创建一个底部弹框，并使用CupertinoPicker作为二级选择器，并在选择后更新界面：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
 
class BottomPickerDialog extends StatefulWidget {
  @override
  _BottomPickerDialogState createState() => _BottomPickerDialogState();
}
 
class _BottomPickerDialogState extends State<BottomPickerDialog> {
  String selectedValue = 'Item 1'; // 默认选中的值
 
  List<String> items = [
    'Item 1',
    'Item 2',
    'Item 3',
    // ...其他选项
  ];
 
  // 选择器选择变化时的回调
  void _onSelectedItemChanged(String selectedValue) {
    setState(() {
      this.selectedValue = selectedValue;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return CupertinoActionSheet(
      title: Text('选择你的项目'),
      actions: <Widget>[
        CupertinoPicker(
          itemExtent: 40.0,
          onSelectedItemChanged: _onSelectedItemChanged,
          children: items.map((String item) {
            return Center(child: Text(item));
          }).toList(),
        ),
      ],
      cancelButton: CupertinoActionSheetAction(
        onPressed: () {
          Navigator.pop(context); // 关闭弹框
        },
        child: Text('取消'),
      ),
    );
  }
}
 
void main() {
  runApp(MaterialApp(home: Scaffold(body: Center(child: RaisedButton(
    onPressed: () {
      showCupertinoModalPopup(
        context: context,
        builder: (BuildContext context) => BottomPickerDialog(),
      );
    },
    child: Text('打开选择器'),
  )))));
}

这段代码首先定义了一个BottomPickerDialog类，它是一个有状态的组件，包含了一个CupertinoPicker和一个_onSelectedItemChanged方法，该方法在用户选择时更新选择的值。在build方法中，它创建了一个CupertinoActionSheet，其中包含了CupertinoPicker和取消按钮。

在main函数中，我们创建了一个RaisedButton，当按下时，会使用showCupertinoModalPopup显示BottomPickerDialog。这个例子提供了一个简单的方法来创建一个可以更新界面并且可以通过用户交互进行选择的底部弹框。