Flutter如何给页面直接传参替代Navigator.pushNamed路由传参

解决方案 #

首先纠正一个误区：Flutter中Widget的key是框架用于标识控件的专用参数，类型为Key，不能直接传入int类型的业务参数，也不会参与你的业务逻辑处理，你需要单独声明业务参数接收字段。

第一步：修改BrowseCategoryPage构造函数，新增业务参数

假设你需要传递分类对象（对应你之前路由传的_categories[index]，类型为Category）和自定义id参数，修改后代码如下：

// 先导入你的Category模型对应的文件
class BrowseCategoryPage extends StatefulWidget {
  // 声明业务参数字段
  final Category? category;
  final int? id;

  // 重构构造函数，支持参数传入
  const BrowseCategoryPage({
    Key? key,
    this.category,
    this.id,
  }) : super(key: key);

  @override
  State<BrowseCategoryPage> createState() => _BrowseCategoryPageState();
}

第二步：直接构造页面时传入参数

直接给你声明的业务参数赋值即可，示例：

// 传入分类对象
BrowseCategoryPage(category: _categories[index])
// 传入自定义id
BrowseCategoryPage(id: 1)

可选：兼容原有Navigator.pushNamed传参逻辑

如果你还需要保留之前通过路由名传arguments的用法，可以在页面初始化时兼容两种取参方式：

class _BrowseCategoryPageState extends State<BrowseCategoryPage> {
  @override
  void initState() {
    super.initState();
    // 优先取构造传入的参数，没有的话再取路由携带的参数
    Category? category = widget.category;
    int? pageId = widget.id;
    category ??= ModalRoute.of(context)?.settings.arguments as Category?;
    
    // 后续直接使用拿到的参数做业务处理即可
  }
}

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