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

Question

我需要以下代码的帮助...我创建了一个具有特定数量的图块的网格...我希望能够单独单击每个图块并在单击后打开一个新页面。我怎样才能在 android studio 中做到这一点？

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)),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

标签： fluttergridviewonclick

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)),
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }