如何在 GridView 中使用 onTap？

Posted 2023-02-23

【中文标题】如何在 GridView 中使用 onTap？

【英文标题】：How can I use onTap in GridView?

【发布时间】：2021-03-11 23:20:33

【问题描述】：

我想在 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],
                  ),
                ],
              ),
            ],
          ),
        )
          ),
    );
  

【参考方案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

【讨论】：

我想添加材质触摸涟漪...flutter.dev/docs/cookbook/gestures/ripples你有什么想法吗？谢谢

是的，您可以使用 SnackBar 小部件，这是一个示例 youtube.com/watch?v=bqA8anBgqQI

库比蒂诺风格的应用怎么样？