Question

所以，这是我的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)
     ],
    ),
   ),
  );
 }
}

Answer 1

我尝试将带有简单打印语句的Inkwell添加到您的其中一个图块中，并且可以正常工作，在控制台中单击“报告打印”即可。

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),
  ],
),

如何在Flutter中将GridView导航到另一个页面？

1 个答案: