Flutter跨页面将列表数据渲染至Dropdown组件的实现问题

1. 导航到目标页面时传递fermentables列表 #

在源页面的导航逻辑中，通过Navigator.push将fermentables列表作为参数传递给目标页面：

// 源页面中的导航触发代码
ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => FermentableDropdownPage(fermentables: fermentables),
      ),
    );
  },
  child: const Text('跳转到发酵物选择页'),
)

2. 目标页面接收列表并构建Dropdown组件 #

创建目标页面FermentableDropdownPage，接收传递的列表，用状态变量管理选中项，最终渲染Dropdown：

import 'package:flutter/material.dart';

class FermentableDropdownPage extends StatefulWidget {
  final List<Fermentable> fermentables;

  // 构造函数接收外部传入的fermentables列表
  const FermentableDropdownPage({super.key, required this.fermentables});

  @override
  State<FermentableDropdownPage> createState() => _FermentableDropdownPageState();
}

class _FermentableDropdownPageState extends State<FermentableDropdownPage> {
  // 存储当前选中的发酵物名称
  String? _selectedName;

  @override
  void initState() {
    super.initState();
    // 可选：初始化选中列表第一个元素的名称
    if (widget.fermentables.isNotEmpty) {
      _selectedName = widget.fermentables.first.name;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('选择发酵物')),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
        child: DropdownButton<String>(
          value: _selectedName,
          hint: const Text('请选择发酵物'),
          isExpanded: true, // 让下拉按钮铺满父容器宽度
          // 将fermentables列表转为DropdownMenuItem数组
          items: widget.fermentables.map((item) {
            return DropdownMenuItem<String>(
              value: item.name,
              child: Text(item.name),
            );
          }).toList(),
          // 选中项变化时更新状态
          onChanged: (String? newName) {
            setState(() {
              _selectedName = newName;
            });
            // 这里可以添加选中后的业务逻辑，比如打印、提交等
            print('当前选中：$newName');
          },
        ),
      ),
    );
  }
}

3. 额外提醒 #

• 确保Fermentable类在目标页面中可访问（比如放在公共文件，或和目标页面代码在同一文件）
• 如果fermentables可能为空，建议添加空状态处理（比如显示"暂无数据"的文本），避免Dropdown组件报错

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