Flutter如何动态获取列表项id并通过onPressed点击传参跳转

1. 改造CategoryItems组件，支持传参与点击绑定 #

你当前的CategoryItems组件仅接收名称和图标，需要先扩展参数，同时给卡片外层加点击响应能力：

class CategoryItems extends StatelessWidget {
  final String id;
  final String name;
  final IconData icon;
  final VoidCallback onPressed;

  const CategoryItems({
    super.key,
    required this.id,
    required this.name,
    required this.icon,
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    // 用InkWell包裹原有卡片，实现点击事件绑定+水波纹效果
    return InkWell(
      onTap: onPressed,
      borderRadius: BorderRadius.circular(15),
      child: Container(
        // 这里保留你原有CategoryItems的卡片样式代码即可
        padding: const EdgeInsets.all(15),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          gradient: LinearGradient(
            colors: [Colors.deepOrange.shade100, Colors.deepOrange.shade300],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(icon, size: 42, color: Colors.white),
            const SizedBox(height: 12),
            Text(
              name,
              style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

2. 修改主页列表渲染逻辑，传入id与跳转回调 #

原来的列表map逻辑仅传递了名称和图标，现在需要补充id参数，同时在点击回调中携带id执行路由跳转，修改后主页body部分代码如下：

body: GridView(
  padding: const EdgeInsets.all(20),
  children: DUMMY_CATEGORIES.map((categoryItem) => CategoryItems(
    id: categoryItem.id,
    name: categoryItem.name,
    icon: categoryItem.icon,
    onPressed: () {
      // 点击时携带当前分类id跳转到详情页
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => CategoryDetailPage(
            categoryId: categoryItem.id,
          ),
        ),
      );
    },
  )).toList(),
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 20,
    crossAxisSpacing: 20
  ),
),

3. 目标页面接收id参数 #

跳转的目标页面只需要在构造函数中增加参数，接收传入的分类id即可使用：

class CategoryDetailPage extends StatelessWidget {
  final String categoryId;
  const CategoryDetailPage({super.key, required this.categoryId});

  @override
  Widget build(BuildContext context) {
    // 拿到categoryId后，就可以根据id拉取对应分类的数据渲染页面
    return Scaffold(
      appBar: AppBar(
        title: Text('分类 $categoryId 详情'),
        backgroundColor: Colors.deepOrange,
        centerTitle: true,
      ),
      body: Center(
        child: Text('当前展示的是ID为$categoryId的分类内容'),
      ),
    );
  }
}

如果你项目用的是命名路由，只需要在跳转时通过arguments字段携带id，目标页面通过ModalRoute.of(context)?.settings.arguments取出id即可，核心传参逻辑一致。

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