Flutter技术问题：如何通过网格块索引跳转对应页面

问题原因 #

报错The name 'MyPage' isn't a class是因为未定义名为MyPage的页面类，且当前代码未建立索引与目标页面的关联逻辑。

解决步骤 #

1. 定义对应页面类

先创建与索引匹配的目标页面，比如索引0对应MyPage1、索引1对应MyPage2，示例如下：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("页面1")),
      body: const Center(child: Text("页面1内容"))
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("页面2")),
      body: const Center(child: Text("页面2内容"))
    );
  }
}

// 依次定义MyPage3至MyPage8...

2. 建立索引与页面的映射

在GridView所在页面中，创建列表存储索引对应的页面Widget，顺序需与GridView的item顺序一致：

final List<Widget> _pages = const [
  MyPage1(),
  MyPage2(),
  MyPage3(),
  MyPage4(),
  MyPage5(),
  MyPage6(),
  MyPage7(),
  MyPage8(),
];

3. 修改GridView的onTap跳转逻辑

替换原Navigator.push代码，根据索引从映射列表中取对应页面，注意移除const修饰符（动态获取的页面无法使用const）：

onTap: () => Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => _pages[index]),
),

修改后的完整GridView代码片段 #

body: AnimationLimiter(
  child: GridView.count(
    physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
    padding: EdgeInsets.all(_w / 60),
    crossAxisCount: columnCount,
    children: List.generate(
      8,
      (int index) {
        return InkWell(
          child: AnimationConfiguration.staggeredGrid(
            position: index,
            duration: const Duration(milliseconds: 500),
            columnCount: columnCount,
            child: ScaleAnimation(
              duration: const Duration(milliseconds: 900),
              curve: Curves.fastLinearToSlowEaseIn,
              child: FadeInAnimation(
                child: Container(
                  margin: EdgeInsets.only(bottom: _w / 30, left: _w / 60, right: _w / 60),
                  decoration: BoxDecoration(
                    color: Colors.blueGrey,
                    borderRadius: const BorderRadius.all(Radius.circular(20)),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.1),
                        blurRadius: 40,
                        spreadRadius: 10,
                      ),
                    ],
                  ),
                  child: Center(
                    child: Text(
                      appTodoList[index],
                      textAlign: TextAlign.center,
                      style: GoogleFonts.laila(
                        textStyle: Theme.of(context).textTheme.headlineMedium,
                        fontSize: 30,
                        fontWeight: FontWeight.w900,
                        color: Colors.black54,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
          // 修改后的跳转逻辑
          onTap: () => Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => _pages[index]),
          ),
        );
      },
    ),
  ),
),

补充说明 #

如果页面需要接收参数（比如传递当前索引），可修改页面类添加参数，并调整映射逻辑：

// 带参数的页面类示例
class MyPage1 extends StatelessWidget {
  final int index;
  const MyPage1({super.key, required this.index});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("页面${index+1}")),
      body: Center(child: Text("页面${index+1}内容"))
    );
  }
}

// 映射列表改为带参数的构造器集合
final List<Widget Function(int)> _pageBuilders = [
  (index) => MyPage1(index: index),
  (index) => MyPage2(index: index),
  // ...其他页面
];

// 跳转逻辑更新
onTap: () => Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => _pageBuilders[index](index)),
),

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