如何在 GridView 中使用 onTap？

Question

我想将 onTap() 与 GridView 一起使用并在 google 中搜索。

但是我没有应用这个代码。

因此，您能提出任何解决方案吗？

最近开始使用Flutter和编程

我认为我的问题很抽象，所以如果您对此有任何疑问。

请随时问我。

谢谢

class MyHomePage extends StatefulWidget {

  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title,
                    style: TextStyle(fontFamily: 'OpenSans'),
                   ),
        centerTitle: true,
      ),

      body: Container(

        child: Padding(
          padding: const EdgeInsets.all(10.0),

          child: Column(

            children: <Widget> [

              GridView.count(

                primary: true,
                padding: const EdgeInsets.all(20),
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                crossAxisCount: 2,
                shrinkWrap: true,

               children: <Widget>[

                  Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text("He'd have you all unravel at the"),
                    color: Colors.teal[100],
                    
                  ),

                  Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text('Heed not the rabble'),
                    color: Colors.teal[200],

                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text('Sound of screams but the'),
                    color: Colors.teal[300],
                  ),
                ],
              ),
            ],
          ),
        )
          ),
    );
  }
}

Answer 1

您可以使用 inkwell 使任何内容都可以点击

InkWell(
                  onTap: () {
                    print('1 was clicked');
                  },
                  child: Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text('Sound of screams but the'),
                    color: Colors.teal[300],
                  ),

这里有你需要的一切

import 'package:flutter/material.dart';
import 'package:testflow/clickaletexsheet.dart';
import 'package:testflow/paint.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          widget.title,
          style: TextStyle(fontFamily: 'OpenSans'),
        ),
        centerTitle: true,
      ),
      body: Container(
          child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Column(
          children: <Widget>[
            GridView.count(
              primary: true,
              padding: const EdgeInsets.all(20),
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              crossAxisCount: 2,
              shrinkWrap: true,
              children: <Widget>[
                Material(
                  color: Colors.teal[100],
                  child: InkWell(
                    onTap: () {
                      print('1 was clicked');
                    },
                    child: Container(
                      padding: const EdgeInsets.all(8),
                      child: const Text("He'd have you all unravel at the"),
                    ),
                  ),
                ),
                Material(
                  color: Colors.teal[200],
                  child: InkWell(
                    onTap: () {
                      print('2 was clicked');
                    },
                    child: Container(
                      padding: const EdgeInsets.all(8),
                      child: const Text('Heed not the rabble'),
                    ),
                  ),
                ),
                Material(
                  color: Colors.teal[300],
                  child: InkWell(
                    onTap: () {
                      print('3 was clicked');
                    },
                    child: Container(
                      padding: const EdgeInsets.all(8),
                      child: const Text('Sound of screams but the'),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      )),
    );
  }
}

我还将 inkwell 定义为 material 小部件的子项，并将容器的 color 传递给 material 而不是容器本身，因为这样当你单击其中之一，如果您不这样做，启动画面将起作用，用户在单击它时不会发现在这里阅读更多关于墨水瓶的信息inkwell

如何在 GridView 中使用 onTap？

How can I use onTap in GridView?

gridview

flutter

flutter-layout