dart Flutter：如何使用ontap()中网格块的索引导航到新页面

w1jd8yoj 于 2023-03-16 发布在 Flutter

关注(0)|答案(1)|浏览(113)

下面是网格视图代码

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) => const MyPage(index))),

              );
            },
          ),
        ),

这部分让我很困扰：

onTap: () => Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const MyPage(index))),
);

错误信息：名称“MyPage”不是类。
我有一个类，它表示每个被单击的网格块的列表。

网格块1 -〉我的页面1（）
网格块2 -〉MyPage 2（）等

我怎样才能把索引包含在名字中并使它被识别为类名？

dart

来源：https://stackoverflow.com/questions/75644031/flutter-how-to-navigate-to-a-new-page-using-the-index-of-the-grid-block-in-the

1条答案

按热度按时间

5m1hhzi41#

由于Flutter不使用反射，因此您无法连接类名，您可以创建一个方法，根据您的条件显示所需的小部件，如下所示：

Widget _getPage(int index){
  switch(index){
    case 1: return Page1();
    case 2: return Page1();
    // and so on
  }
  return Placeholder();
}

并这样称呼：

Navigator.push(context, MaterialPageRoute(builder: (context) => _getPage(index))),

或

如果只想对所有小部件使用一个小部件，可以像现在这样传递参数，但要删除const关键字，因为它不是常量。

Navigator.push(context, MaterialPageRoute(builder: (context) => MyPage(index))),

您需要创建一个名为“MyPage”的小部件，如下所示：

class MyPage extends StatelessWidget {
  const MyPage({required this.index});

  final int index;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Page :$index'),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-03-16

我来回答

dart Flutter：如何使用ontap()中网格块的索引导航到新页面

1条答案

相关问题

热门标签

最新问答