Flutter：如何渲染从子页面返回的Chip列表？主页面无法显示

我有一个带按钮的主页面，点击按钮会跳转到新页面让用户输入数据。用户输入完成后，数据会被映射成列表并渲染为Chip组件。返回主页面时，通过Navigator.pop(context, _chipList)把列表传回，但主页面无法像子页面那样渲染出Chip组件。

关键代码展示 #

ChipModel类 #

class ChipModel {
  final String id;
  final String name;
  final double weight;

  ChipModel({
    required this.id,
    required this.name,
    required this.weight,
  });
  @override toString() => 'ChipModel: $name $weight';
}

主页面获取列表的方法 #

Future<void> _navigateToIngredientScreen(BuildContext context) async {
  _chipList = await Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => AddIngredientsScreen(),
    ),
  );
  if(!mounted) return;

  print(_chipList.toString());
}

主页面渲染逻辑 #

_chipList.isEmpty ? InkWell(
                      onTap: () {
                            _navigateToIngredientScreen(context);
                          },
                          child: Container(
                            width: width - 16,
                            height: 50,
                            child: Center(
                              child: Text(
                                'Add Ingredients',
                                style: TextStyle(
                                  color: secondaryColor,
                                ),
                              ),
                            ),
                          ),
                        )
                      : Column(
                          children: [
                            Padding(
                              padding: EdgeInsets.all(10),
                              child: Wrap(
                                spacing: 10,
                                children: _chipList
                                    .map(
                                      (chip) => Chip(
                                        label: Text(chip.name +
                                            ' ' +
                                            chip.weight.toString()),
                                        onDeleted: () {
                                          deleteChips(chip.id);
                                        },
                                      ),
                                    )
                                    .toList(),
                              ),
                            ),
                            Expanded(
                                child: Align(
                              alignment: FractionalOffset.bottomCenter,
                              child: Row(children: []),
                            ))
                          ],
                        ),

解决方案 #

1. 调用setState触发UI更新 #

从子页面获取到列表后，必须通过setState通知Flutter框架重新构建UI，否则列表更新不会反映到界面上。修改获取方法：

Future<void> _navigateToIngredientScreen(BuildContext context) async {
  final result = await Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => AddIngredientsScreen(),
    ),
  );
  if(!mounted) return;
  
  setState(() {
    _chipList = result ?? []; // 处理子页面返回null的情况
  });
  print(_chipList.toString());
}

2. 明确列表类型并初始化 #

在主页面的状态类中，显式声明_chipList的类型为List<ChipModel>并初始化，避免类型推断错误：

List<ChipModel> _chipList = [];

3. 验证子页面返回的数据类型 #

确保子页面Navigator.pop返回的确实是List<ChipModel>类型的数据：

// 子页面返回逻辑
Navigator.pop(context, _chipList); // 确认此处_chipList为List<ChipModel>

4. 处理空值边界情况 #

如果_chipList可能为null，在判断isEmpty前先做null检查：

(_chipList?.isEmpty ?? true) ? InkWell(...) : Column(...)

完成以上修改后，主页面就能正确渲染从子页面返回的Chip列表了。

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