如何在 GridView 中使用 onTap？

Question

我想在 GridView 中使用 onTap() 并在 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 小部件的子级，并将colorof 容器传递给材质而不是容器本身，因为这样，当您单击其中一个时，如果您单击其中一个，则飞溅将起作用不要做那个用户在点击它时不会发现 在此处阅读有关墨水池的更多信息inkwell