如何为Flutter StaggeredGridView的每个项添加独立跳转？

当然可以给每个交错网格项设置专属跳转！我们只需要给你的MyItems组件添加一个点击回调参数，然后在每个实例里传入对应的跳转逻辑就行，下面是具体步骤：

步骤1：修改MyItems组件，添加点击交互支持 #

我们需要给MyItems方法新增一个VoidCallback类型的参数，用来接收每个项的点击逻辑。同时用InkWell（比GestureDetector更适配Material设计，自带点击波纹效果）包裹组件内容，绑定点击事件：

Material MyItems(IconData icon, String heading, int color, VoidCallback onTap) {
  return Material(
    color: Colors.white,
    elevation: 12.0,
    shadowColor: const Color(0xff2962ff),
    borderRadius: BorderRadius.circular(20.0),
    child: InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(20.0), // 保持和外层Material一致的圆角，让波纹效果更协调
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      heading,
                      style: TextStyle(
                        color: Color(color),
                        fontSize: 20.0,
                      ),
                    ),
                  ),
                  Material(
                    color: Color(color),
                    borderRadius: BorderRadius.circular(24.0),
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Icon(
                        icon,
                        color: Colors.white,
                        size: 20.0,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

步骤2：为每个网格项传入独立的跳转逻辑 #

现在回到StaggeredGridView的children列表，给每个MyItems实例传入对应的onTap回调——不管是跳转到内部页面，还是用url_launcher打开外部链接，都可以个性化设置：

child: Material(
  child: StaggeredGridView.count(
    crossAxisCount: 2,
    crossAxisSpacing: 8,
    mainAxisSpacing: 16,
    shrinkWrap: true,
    padding: const EdgeInsets.symmetric(horizontal: 6.0, vertical: 6.0),
    children: <Widget>[
      // 跳转到自定义商品页面
      MyItems(Icons.shop, "商品商城", 0xff42a5f5, () {
        Navigator.push(context, MaterialPageRoute(builder: (context) => const ProductPage()));
      }),
      // 打开外部官网链接（需先引入url_launcher包）
      MyItems(Icons.link, "官方网站", 0xff42a5f5, () async {
        const url = "https://your-website.com";
        if (await canLaunchUrl(Uri.parse(url))) {
          await launchUrl(Uri.parse(url));
        }
      }),
      // 跳转到设置页面
      MyItems(Icons.settings, "系统设置", 0xff42a5f5, () {
        Navigator.push(context, MaterialPageRoute(builder: (context) => const SettingsPage()));
      }),
      // 其他项同理，按需编写各自的跳转逻辑
      MyItems(Icons.shop, "Text Here", 0xff42a5f5, () {
        // 自定义跳转行为
      }),
      MyItems(Icons.shop, "Text Here", 0xff42a5f5, () {
        // 自定义跳转行为
      }),
      MyItems(Icons.shop, "Text Here", 0xff42a5f5, () {
        // 自定义跳转行为
      }),
      MyItems(Icons.shop, "Text Here", 0xff42a5f5, () {
        // 自定义跳转行为
      }),
    ],
    staggeredTiles: const [
      StaggeredTile.extent(2, 150.0),
      StaggeredTile.extent(1, 150.0),
      StaggeredTile.extent(1, 150.0),
      StaggeredTile.extent(2, 150.0),
      StaggeredTile.extent(1, 150.0),
      StaggeredTile.extent(1, 150.0),
      StaggeredTile.extent(2, 150.0),
    ],
  ),
),

补充小提示 #

• 如果使用url_launcher，需要先在pubspec.yaml中添加依赖：

  dependencies:
    url_launcher: ^6.2.5 # 建议使用最新版本
  

• 若不需要Material波纹效果，也可以用GestureDetector替代InkWell，替换后代码逻辑完全一致。
• 这种通过回调函数传递交互逻辑的方式，能让每个MyItems实例拥有独立的行为，完美解决你需要的个性化跳转需求。

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