如何使每个网格图块都可点击以将我带到 Flutter 中的新页面

Question

我需要以下代码的帮助...我创建了一个包含特定数量图块的网格...我希望能够单独单击每个图块并在单击后打开一个新页面.我如何在 android 工作室中执行此操作？

class GridOne extends StatefulWidget {

  @override
  _GridOneState createState() => new _GridOneState();
}

class _GridOneState extends State<GridOne> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GridView.count(
        crossAxisCount: 6,
        children: List.generate(
          947,
          (index) {
            return Card(
              elevation: 10.0,
              color: Color(0xFF184946),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0),
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  color: Color(0xFF184946),
                  child: Center(
                    child: Text(
                      '$index',
                      style: TextStyle(fontSize: 18, color: Color(0xFFFCF8F8)),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

Answer 1

import 'package:flutter/material.dart';

class GridOne extends StatefulWidget {

  @override
  _GridOneState createState() => new _GridOneState();
}

class _GridOneState extends State<GridOne> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GridView.count(
        crossAxisCount: 6,
        children: List.generate(
          947,
              (index) {
            return RawMaterialButton(
              onPressed: () {
                /// Navigation code will come here
              },
              child: Card(
                elevation: 10.0,
                color: Color(0xFF184946),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    color: Color(0xFF184946),
                    child: Center(
                      child: Text(
                        '$index',
                        style: TextStyle(fontSize: 18, color: Color(0xFFFCF8F8)),
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

Answer 2

我们可以将 Card Widget 包装在 GestureDetector 中以使用 onTap() 方法：

return GestureDetector(
   onTap: () {
     // let's use the magic of Navigator to navigate to another screen
     Navigator.push(
       context,
       MaterialPageRoute(builder: (context) => SecondScreen()), // second screen widget
     );
   },
   child: Card(
     elevation: 10.0,
     color: Color(0xFF184946),
     shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(20.0),
     ),
     child: Padding(
       padding: const EdgeInsets.all(8.0),
       child: Container(
         color: Color(0xFF184946),
         child: Center(
           child: Text(
             '$index',
             style: TextStyle(fontSize: 18, color: Color(0xFFFCF8F8)),
           ),
         ),
       ),
     ),
   ),
);

我们的完整代码段将是：

class GridOne extends StatefulWidget {

  @override
  _GridOneState createState() => new _GridOneState();
}

class _GridOneState extends State<GridOne> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GridView.count(
        crossAxisCount: 6,
        children: List.generate(
          947,
          (index) {
            return GestureDetector(
               onTap: () {
                 // let's use the magic of Navigator to navigate to another screen
                 Navigator.push(
                   context,
                   MaterialPageRoute(builder: (context) => SecondScreen()), // second screen widget
                 );
               },
               child: Card(
                 elevation: 10.0,
                 color: Color(0xFF184946),
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(20.0),
                 ),
                 child: Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: Container(
                     color: Color(0xFF184946),
                     child: Center(
                       child: Text(
                         '$index',
                         style: TextStyle(fontSize: 18, color: Color(0xFFFCF8F8)),
                       ),
                     ),
                   ),
                 ),
               ),
            );
          },
        ),
      ),
    );
  }

如何使每个网格图块都可点击以将我带到 Flutter 中的新页面

How can I make each grid tile clickable to bring me to a new page in Flutter

gridview

onclick

flutter