在 LIstView 中使用 Tap 函数答案

【问题标题】：Working with Tap function within LIstView在 LIstView 中使用 Tap 函数
【发布时间】：2023-01-28 22:19:41
【问题描述】：

我正在测试 ListView 中项目的“点击功能”，但它似乎不起作用。当我点击列表时，打印功能不起作用。

return Scaffold(
          appBar: AppBar(
            // App Bar
            title: Text(
              "ListView On-Click Event",
              style: TextStyle(color: Colors.grey),
            ),
            elevation: 0,
            backgroundColor: Colors.white,
          ),
          // Main List View With Builder
          body: ListView.builder(
              itemCount: imgList.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    print("button pressed");
                    print(index);
                  },
                  child: Container(
                    margin: const EdgeInsets.symmetric(
                      vertical: 2.0,
                      horizontal: 8.0,
                    ),
                    child: Stack(
                      children: <Widget>[
                        cardDesign,
                        cardImage,
                      ],
                    ),
                  ),
                ); // gesturedetector
              }));

我哪里错了？

【问题讨论】：

错误是什么？
只有当我在屏幕上滚动时，我才会得到以下信息：W/HiTouch_PressGestureDetector(6310)：触摸指针移动很多。 X的移动距离为：47.955597，limit为：60Y的移动距离为：63.972656，limit为：60
这个错误是因为Stack 改用Column，参考我下面的回答
似乎一切都在这里工作，你能包括更多cardDesign和cardImage并更新将重现相同问题的 sn-p，检查更多关于minimal-reproducible-example
您使用的是什么 IDE - Xcode？安卓工作室？你看到其他日志语句了吗？你确定你没有在控制台输出上留下过滤器吗？

标签： flutter dart flutter-layout

【解决方案1】：

尝试使用 Column 而不是 Stack

ListView.builder(
          shrinkWrap: true,
          itemCount: 10,
          itemBuilder: (context, index) {
            return GestureDetector(
               onTap: () {
                print("button pressed");
                print(index);
              },
              child: Container(
                margin: const EdgeInsets.symmetric(
                  vertical: 2.0,
                  horizontal: 8.0,
                ),
                child: Column(
                  children: <Widget>[
                    Text(index.toString()),//put your widgets here
                  ],
                ),
              ),
            ); // gesturedetector
          }),

【讨论】：

仍然没有打印任何内容:(
你在测试上面的答案吗？它在我这边工作，你可以在dartpad上测试上面的代码

【解决方案2】：

你可以在 ListView 中使用 ListTile，因为 ListTile 有 onTap 功能，同样在这里：

 ListView.builder(
                itemCount: data.length,
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: ListTile(
                      title: Text('TextHere'),
                      onTap: () {
                        log('on tap');
                      },
                    ),
                  );
                });

【讨论】：