CarouselView 子项不可点击

Question

我在 Flutter 上使用 CarouselView，我希望能够单击属于轮播成员的每个 ClipRRect 以转到新页面。轮播由包含堆栈的 ClipRRect 组成。

最初，我将堆栈包裹在手势检测器中并将 HitTestBehaviour 设置为半透明，但这不起作用。然后我将整个 ClipRRect 包裹在手势检测器中，但这也不起作用。 对于上下文，这是我的代码：

import 'package:flutter/material.dart';

class MyPracticesCarousel extends StatelessWidget {
  const MyPracticesCarousel({super.key});

  

  @override
  Widget build(BuildContext context) {
    return CarouselView(
      itemExtent: 320,
      shrinkExtent: 320,
      itemSnapping: true,
      padding: const EdgeInsets.all(8),
      children: List<Widget>.generate(10, (int index) {
        return MyPracticeCard();
      }),
    );
  }
}



class MyPracticeCard extends StatelessWidget {
  const MyPracticeCard({
    super.key,
  });

  void viewPractice(BuildContext context)
  {
    print("Card pressed");
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => viewPractice(context),
      behavior: HitTestBehavior.translucent,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: Stack(
          children: [
            Container(
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("assets/GP_front_image.jpg"),
                  fit: BoxFit.cover,
                  alignment: Alignment.topCenter,
                ),
              ),
            ),
            Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.black,
                    Colors.transparent,
                  ],
                  begin: Alignment.bottomCenter,
                  end: Alignment.center,
                  stops: [0.0, 1],
                ),
              ),
            ),
            const Positioned(
              bottom: 15,
              left: 15,
              right: 15,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "London Bridge General Practice",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                    ),
                    overflow: TextOverflow.ellipsis,
                    maxLines: 1,
                  ),
                  // SizedBox(height: 2), // Optionally, uncomment for spacing
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                        child: Text(
                          "0.2 miles",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                            fontWeight: FontWeight.w400,
                          ),
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                        ),
                      ),
                      
                        Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Text(
                              "4.5",
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 16,
                                fontWeight: FontWeight.w400,
                              ),
                              overflow: TextOverflow.ellipsis,
                              maxLines: 1,
                            ),
                            SizedBox(width: 2,),
                            Icon(
                              Icons.star,
                              color: Colors.white, // Color of the star icon
                              size: 18, // Size of the star icon
                            ),
                            
                          ],
                        ),
                    
                    ],
                  ),
                ],
              ),
            ),
            Positioned(
              top: 10,
              right: 10,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Image.asset(
                  "assets/HCA_logo.jpg",
                  width: 50,
                  height: 50,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

CarouselView

具有内置

onTap

，它是一个 Inkwell，并且 GestureDetector 点击事件由此跳过。

你可以使用喜欢

return CarouselView(
  itemExtent: 325,
  itemSnapping: true,
  onTap: (int index) {
    //
  },