Flutter联动下拉菜单失效问题求助

核心问题 #

当前场馆下拉菜单直接使用完整的halllist，未根据选中楼层的floorshortname做过滤，导致所有场馆全部显示。需要在楼层切换时，动态筛选对应楼层的场馆并更新下拉选项。

修改步骤及完整代码实现 #

1. 将状态变量移至_FOCMapState类内部，避免全局状态管理混乱
2. 添加filteredHalls变量存储当前楼层对应的场馆列表
3. 楼层切换时重新筛选场馆，同时重置选中的场馆为过滤后的第一个
4. 场馆下拉菜单使用过滤后的列表生成选项

class FOCMap extends StatefulWidget {
  const FOCMap({super.key});

  @override
  State<FOCMap> createState() => _FOCMapState();
}

List<FloorModel> floorlist = [
  FloorModel(1, 'Ground Floor', 'img/groundfloor.jpg', 'ground'),
  FloorModel(2, '1st floor', 'img/first.jpeg', 'first'),
  FloorModel(3, '2nd Floor', 'img/second.jpeg', 'second'),
  FloorModel(4, 'B1 Floor', 'img/b1.jpeg', 'BOne'),
  FloorModel(5, 'B2 Floor', 'img/b2.jpeg', 'BTwo'),
  FloorModel(6, 'B3 Floor', 'img/b3.jpeg', 'BThree'),
];

List<HallModel> halllist = [
  HallModel(1, '001', 'img/groundfloor.jpg', 'ground'),
  HallModel(2, '002', 'img/first.jpeg', 'ground'),
  HallModel(3, '003', 'img/second.jpeg', 'ground'),
  HallModel(4, '004', 'img/second.jpeg', 'ground'),
  HallModel(5, '005', 'img/second.jpeg', 'ground'),
  HallModel(6, '006', 'img/second.jpeg', 'ground'),
  HallModel(7, '007-Computer Lab', 'img/second.jpeg', 'ground'),
  HallModel(8, '008-Computer Lab', 'img/second.jpeg', 'ground'),
  HallModel(9, '009', 'img/second.jpeg', 'ground'),
  HallModel(10, 'Program Office', 'img/second.jpeg', 'ground'),
  HallModel(11, '101', 'img/second.jpeg', 'BOne'),
  HallModel(12, '102', 'img/second.jpeg', 'BOne'),
  HallModel(13, '103', 'img/second.jpeg', 'BOne'),
  HallModel(14, '104', 'img/second.jpeg', 'BOne'),
  HallModel(15, '105', 'img/second.jpeg', 'BOne'),
  HallModel(16, '106', 'img/second.jpeg', 'BOne'),
  HallModel(17, '107', 'img/second.jpeg', 'BOne'),
  HallModel(18, '108', 'img/second.jpeg', 'BOne'),
  HallModel(19, '109', 'img/second.jpeg', 'BOne'),
  HallModel(20, '110', 'img/second.jpeg', 'BOne'),
  HallModel(21, '111', 'img/second.jpeg', 'BOne'),
  HallModel(22, '112', 'img/second.jpeg', 'BOne'),
  HallModel(23, '113', 'img/second.jpeg', 'BOne'),
  HallModel(24, '114', 'img/second.jpeg', 'BOne'),
  HallModel(25, '201', 'img/second.jpeg', 'BTwo'),
  HallModel(26, '202', 'img/second.jpeg', 'BTwo'),
  HallModel(27, '203', 'img/second.jpeg', 'BTwo'),
  HallModel(28, '204-Lab', 'img/second.jpeg', 'BTwo'),
  HallModel(29, '205-Lab', 'img/second.jpeg', 'BTwo'),
  HallModel(30, 'Acadamic Staff', 'img/second.jpeg', 'BTwo'),
];

class FloorModel {
  final int id;
  final String floorname;
  final String floorimg;
  final String floorshortname;

  FloorModel(this.id, this.floorname, this.floorimg, this.floorshortname);
}

class HallModel {
  final int id;
  final String hallname;
  final String hallpoint;
  final String hallshortname;

  HallModel(this.id, this.hallname, this.hallpoint, this.hallshortname);
}

class _FOCMapState extends State<FOCMap> {
  FloorModel _selectedfloorModel = floorlist.first;
  late HallModel _selectedhallModel;
  String select_img = '';
  late List<HallModel> filteredHalls;

  @override
  void initState() {
    super.initState();
    // 初始化过滤列表为默认楼层的场馆
    filteredHalls = halllist.where((hall) => hall.hallshortname == _selectedfloorModel.floorshortname).toList();
    _selectedhallModel = filteredHalls.first;
    select_img = _selectedhallModel.hallpoint;
  }

  void updateFloorAndHalls(FloorModel newFloor) {
    setState(() {
      _selectedfloorModel = newFloor;
      // 筛选当前楼层对应的场馆
      filteredHalls = halllist.where((hall) => hall.hallshortname == newFloor.floorshortname).toList();
      // 重置选中的场馆为过滤后的第一个
      _selectedhallModel = filteredHalls.first;
      select_img = _selectedhallModel.hallpoint;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Faculty of Computing"),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {},
          ),
        ],
      ),
      body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(_selectedfloorModel.floorimg),
                fit: BoxFit.cover,
              )
          ),
          child: Column(
            children: [
              DropdownButton<FloorModel>(
                  value: _selectedfloorModel,
                  items: floorlist.map((item) {
                    return DropdownMenuItem<FloorModel>(
                      child: Text(item.floorname),
                      value: item,
                    );
                  }).toList(),
                  onChanged: (value){
                    if(value != null){
                      updateFloorAndHalls(value);
                    }
                  }
              ),
              const SizedBox(
                height: 10,
              ),
              DropdownButton<HallModel>(
                  value: _selectedhallModel,
                  items: filteredHalls.map((item) {
                    return DropdownMenuItem<HallModel>(
                      child: Text(item.hallname),
                      value: item,
                    );
                  }).toList(),
                  onChanged: (value){
                    if(value != null){
                      setState((){
                        _selectedhallModel = value;
                        select_img = value.hallpoint;
                      });
                    }
                  }
              ),
              Text(select_img)
            ],
          )
      ),
    );
  }
}

关键修改说明 #

• 状态变量私有化：将所有状态变量移至State类内部，符合Flutter状态管理最佳实践
• 动态过滤逻辑：使用where方法筛选与当前楼层floorshortname匹配的场馆，生成过滤后的列表
• 联动更新：楼层切换时同步更新过滤列表、默认选中场馆及显示图片
• 空值安全处理：在回调中增加空值判断，避免空指针异常

内容的提问来源于stack exchange，提问作者Chamithu Dinsara