Flutter Beamer传值取值异常：始终返回NULL问题求助

问题原因分析 #

1. pathParameters获取不到的原因：pathParameters是从路由路径的占位符中提取参数，你当前的路由路径/homePage/chefStoreHomePage没有定义占位符，且参数是通过data传递的，自然无法从pathParameters拿到值。
2. state.data获取不到的原因：大概率是BeamLocation的配置未正确处理导航携带的BeamState，或在页面构建时没有基于当前传入的state读取数据。

正确传值方案 #

方案一：使用路径参数（pathParameters） #

适合需要在URL中暴露的参数，比如ID类信息。

1. 修改BeamLocation的路由蓝图
   在HomeScreenTab中定义带占位符的路由：

   class HomeScreenTab extends BeamLocation<BeamState> {
     @override
     List<String> get pathBlueprints => [
           '/homePage/chefStoreHomePage/:chefStoreId', // 添加:chefStoreId占位符
         ];
   
     @override
     List<BeamPage> buildPages(BuildContext context, BeamState state) {
       final chefStoreId = int.tryParse(state.pathParameters['chefStoreId'] ?? '');
       return [
         const BeamPage(key: ValueKey('homePage'), child: HomePage()),
         if (state.uri.pathSegments.contains('chefStoreHomePage'))
           BeamPage(
             key: ValueKey('chefStoreHomePage-$chefStoreId'),
             child: ChefStoreWidget(chefStoreId: chefStoreId),
           ),
       ];
     }
   }
   

2. 修改导航代码
   将参数直接拼在路由路径中：

   Beamer.of(context).beamToNamed('/homePage/chefStoreHomePage/9');
   

3. 在Widget中获取参数

   // 在ChefStoreWidget中
   final beamState = context.currentBeamLocation.state as BeamState;
   final chefStoreId = int.tryParse(beamState.pathParameters['chefStoreId'] ?? '');
   

方案二：使用data参数传递 #

适合不需要暴露在URL中的参数，或复杂数据结构。

1. 保持导航代码不变

   Beamer.of(context).beamToNamed('/homePage/chefStoreHomePage', 
     data: {
       'chefStoreId': 9
     }
   );
   

2. 在BeamLocation的buildPages中读取data

   class HomeScreenTab extends BeamLocation<BeamState> {
     @override
     List<String> get pathBlueprints => [
           '/homePage/chefStoreHomePage',
         ];
   
     @override
     List<BeamPage> buildPages(BuildContext context, BeamState state) {
       // 直接从当前state的data中取值
       final chefStoreId = state.data?['chefStoreId'] as int?;
       return [
         const BeamPage(key: ValueKey('homePage'), child: HomePage()),
         if (state.uri.pathSegments.contains('chefStoreHomePage'))
           BeamPage(
             key: const ValueKey('chefStoreHomePage'),
             child: ChefStoreWidget(chefStoreId: chefStoreId),
           ),
       ];
     }
   }
   

3. 在ChefStoreWidget中读取data

   final beamState = context.currentBeamLocation.state as BeamState;
   final chefStoreId = beamState.data?['chefStoreId'] as int?;
   

额外注意事项 #

• 确保使用Beamer的最新稳定版，旧版本可能存在data传递的bug。
• 不要在BeamLocation的初始化方法中手动重置state，避免覆盖传入的data。
• 若使用beamTo而非beamToNamed，需确保自定义的BeamState正确携带data。

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