flutter 使列表视图在保持可点击性的同时跳过其父级的填充

3hvapo4f  于 2023-06-24  发布在  Flutter
关注(0)|答案(1)|浏览(113)

这是我的ListView。我希望它是可点击的,而不仅仅是可见的,同时跳过其父列的填充。现在,由于OverflowBox小部件,它只是可见的,不能点击。

return SizedBox(
      height: 65,
      child: OverflowBox(
        maxWidth: MediaQuery.of(context).size.width,
        alignment: Alignment.centerLeft,
        child: ListView.builder(
          itemCount: galleryItems.length,
          scrollDirection: Axis.horizontal,
          physics: const BouncingScrollPhysics(),
          itemBuilder: (_, idx) {
            final galleryItem = galleryItems[idx];
            return InkWell(
              onTap: () {
                Get.to(
                  () => CustomerPictureScreen(),
                  arguments: {
                    'galleryImage': galleryItem.galleryImage,
                  },
                );
              },
              child: GalleryItemDetailsScreen(
                galleryImage: galleryItem.galleryImage,
                galleryImageId: galleryItem.galleryImageId,
              ),
            );
          },
        ),
      ),
    );
  }
}

这是我的专栏:

return Padding(
    padding: EdgeInsets.only(
      top: small + 4,
      left: medium,
      right: medium,
    ),
    child: Column(
      children: [
        LabelSection(text: 'About', style: headingBookingScreen),
        SizedBox(
          height: medium,
        ),
        AboutSection(
          about: about,
        ),
        SizedBox(
          height: medium,
        ),
        LabelSection(
          text: 'Gallery',
          style: headingBookingScreen,
        ),
        SizedBox(
          height: medium,
        ),
        const GalleryDetailsScreen(),
        SizedBox(
          height: medium,
        ),
      ],
    ),
  );
}
}

以下是我在图片中的意思:

任何帮助将不胜感激。
谢谢你。

qc6wkl3g

qc6wkl3g1#

要使ListView可点击并跳过其父列的填充,可以用GestureDetector Package ListView小部件,并相应地调整填充。下面是一个示例代码片段来演示这一点:

Column(
 children: [
 Padding(
   padding: EdgeInsets.symmetric(horizontal: 20.0),
   child: GestureDetector(
     onTap: () {
       // Handle ListView click event here
     },
     child: OverflowBox(
        maxHeight: 200.0, // Set the desired height
        child: ListView(
          shrinkWrap: true,
          children: [
           // Your ListView items here
         ],
       ),
     ),
   ),
 ),
],)

在上面的代码中,ListView被一个GestureDetector小部件 Package ,使其可以点击。GestureDetector的onTap回调是处理click事件的地方。Padding小部件用于在ListView周围添加所需的填充。OverflowBox小部件确保ListView可以超越父节点的约束,并显示其完整内容。

相关问题