【问题标题】:How to navigate GridView into another page in Flutter?如何将 GridView 导航到 Flutter 中的另一个页面?
【发布时间】:2020-09-26 07:25:46
【问题描述】:

所以,这是我的 GridView 代码。我已经尝试使用 InkWell,但它没有导航到指定的页面。我不知道是什么问题,因为我是编码界的新手。我也尝试重组代码,但正如我所说我是新手,所以代码总是在这里和那里出现一些错误。我希望我能得到一些帮助来解决这个问题。谢谢大家。

class _DashboardState extends State<Dashboard> {
Material myItems(IconData icon, String heading, int color) {
return Material(
  color: Colors.white,
  elevation: 14.0,
  shadowColor: Color(0x802196F3),
  borderRadius: BorderRadius.circular(20.0),
  child: Center(
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[

              //text
              Center(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    heading,
                    style: TextStyle(
                      color: new Color(color),
                      fontSize: 20.0,
                    ),
                  ),
                ),
              ),

              //icon
              Material(
                color: new Color(color),
                borderRadius: BorderRadius.circular(24.0),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Icon(
                    icon,
                    color: Colors.white,
                    size: 30.0,
                  ),
                ),
              ),
            ],
          )
        ],
      ),
    ),
  ),
);

}

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text(
      'Dashboard',
      style: TextStyle(
        color: Colors.white,
      ),
    ),
  ),
  body: Container(
    padding: EdgeInsets.all(16.0),
    child: StaggeredGridView.count(
    crossAxisCount: 1,
    mainAxisSpacing: 12.0,
    padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
    children: <Widget>[
      myItems(
        Icons.report, 
        "Report", 
        0x802196F3),
      myItems(
        Icons.insert_chart, 
        "Chart", 
        0x802196F3),
      myItems(
        Icons.format_list_numbered, 
        "Ranking", 
        0x802196F3),
    ],
    staggeredTiles: [
      StaggeredTile.extent(1, 130),
      StaggeredTile.extent(1, 130),
      StaggeredTile.extent(1, 130)
     ],
    ),
   ),
  );
 }
}

【问题讨论】:

  • 你在哪里尝试push另一个页面?
  • 所以在我的代码下,我像这样插入和 Inkwell,然后继续使用孩子:myItems children [ InkWell(onTap: () { Navigator.of(context).pushNamed("/菜单") },

标签: flutter gridview


【解决方案1】:

我尝试将带有简单打印语句的 Inkwell 添加到您的一个磁贴中,它起作用了,单击报告会在控制台中打印 hello。

children: <Widget>[
    InkWell(
      onTap: () {
        print('hello!');
      },
      child: myItems(Icons.report, "Report", 0x802196F3),
    ),
    myItems(Icons.insert_chart, "Chart", 0x802196F3),
    myItems(Icons.format_list_numbered, "Ranking", 0x802196F3),
  ],
),

【讨论】:

  • 如果要导航到其他页面,这样做是否正确? onTap: () { Navigator.of(context).pushNamed("/Menu");
  • 是的,如果您还显示您的路由代码就更好了。如果它不起作用,可能是因为这个。
  • 对于我的路由代码,我在主页上声明它,就像这样路由:{ "/DashboardPage": (BuildContext context) => new Dashboard(), "/Menu ": (BuildContext 上下文) => new Menu(),
  • 您使用的是相当旧的语法版本,但它应该可以工作。我根据你的代码做了一个demo,成功跳转到另一个页面:paste.ubuntu.com/p/wVwTJVTBwY
猜你喜欢
  • 2021-09-11
  • 2020-09-03
  • 2020-09-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-09-20
  • 1970-01-01
相关资源
最近更新 更多