Flutter 如何实现点击后跳转不同页面的网格卡片

学习检索关键词 #

• Flutter GridView 组件
• Flutter Card 卡片组件
• Flutter InkWell / GestureDetector 点击交互
• Flutter Navigator 路由跳转
• Flutter GridView.builder 懒加载网格
• Flutter SliverGrid 滑动场景网格布局

实现逻辑说明 #

核心实现分为3个环节：首先搭建网格布局容器，其次封装带点击事件的卡片子项，最后为每个卡片绑定对应的跳转目标页面。

可运行示例代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '网格卡片 demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const GridCardPage(),
    );
  }
}

// 网格卡片首页
class GridCardPage extends StatelessWidget {
  const GridCardPage({super.key});

  // 预先定义卡片对应的配置：标题、图标、跳转页面
  final List<Map<String, dynamic>> cardItems = const [
    {"title": "功能1", "icon": Icons.home, "page": Page1()},
    {"title": "功能2", "icon": Icons.message, "page": Page2()},
    {"title": "功能3", "icon": Icons.settings, "page": Page3()},
    {"title": "功能4", "icon": Icons.person, "page": Page4()},
    {"title": "功能5", "icon": Icons.shop, "page": Page5()},
    {"title": "功能6", "icon": Icons.book, "page": Page6()},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("网格卡片列表")),
      body: Padding(
        padding: const EdgeInsets.all(10),
        // 网格布局组件，crossAxisCount指定每行显示的卡片数量
        child: GridView.count(
          crossAxisCount: 2,
          crossAxisSpacing: 10, // 卡片横向间距
          mainAxisSpacing: 10, // 卡片纵向间距
          childAspectRatio: 1.2, // 卡片宽高比
          children: cardItems.map((item) {
            // InkWell组件用于给卡片加点击效果和点击事件
            return InkWell(
              onTap: () {
                // 点击跳转到对应页面
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => item["page"])
                );
              },
              borderRadius: BorderRadius.circular(12),
              child: Card(
                elevation: 4, // 卡片阴影
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(item["icon"], size: 40, color: Colors.blueAccent),
                    const SizedBox(height: 10),
                    Text(item["title"], style: const TextStyle(fontSize: 16)),
                  ],
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

// 示例跳转页面，可根据自己的需求替换成实际业务页面
class Page1 extends StatelessWidget {const Page1({super.key});@override Widget build(BuildContext context)=>Scaffold(appBar:AppBar(title:const Text("页面1")));}
class Page2 extends StatelessWidget {const Page2({super.key});@override Widget build(BuildContext context)=>Scaffold(appBar:AppBar(title:const Text("页面2")));}
class Page3 extends StatelessWidget {const Page3({super.key});@override Widget build(BuildContext context)=>Scaffold(appBar:AppBar(title:const Text("页面3")));}
class Page4 extends StatelessWidget {const Page4({super.key});@override Widget build(BuildContext context)=>Scaffold(appBar:AppBar(title:const Text("页面4")));}
class Page5 extends StatelessWidget {const Page5({super.key});@override Widget build(BuildContext context)=>Scaffold(appBar:AppBar(title:const Text("页面5")));}
class Page6 extends StatelessWidget {const Page6({super.key});@override Widget build(BuildContext context)=>Scaffold(appBar:AppBar(title:const Text("页面6")));}

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