ClipRRect 的半径映射不正确

Question

我试图在颤动的 CarouselView 上制作卡片，但是，当我在其上放置边框半径时，我所输入的内容与所看到的内容之间的映射似乎不正确。我想输入 10 的半径，但我得到的是不同的东西 - 比如半径 20+。半径似乎受到了限制，因为较小的输入不会产生影响，但设置 40 左右的半径确实有效。

我尝试将 ClipRRect 包裹在卡片中，但这会插入 10 的半径，但会切掉图像 - 因为角落没有圆角，因为图像仍然具有较大的半径，并且卡片会切掉圆角

我的代码：

import 'package:flutter/material.dart';

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

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

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



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

  

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      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.topCenter,
                stops: [0.0, 0.75],
              ),
            ),
          ),
          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

从您的描述来看，不完全清楚差异到底在哪里。但根据代码，您可以将

borderRadius

添加到容器中：

... 
child: Stack(
            children: [
              Container(
                decoration: const BoxDecoration(
                borderRadius: BorderRadius.circular(10), <--- here
                  image: DecorationImage(
                    image: AssetImage("assets/GP_front_image.jpg"),
                    fit: BoxFit.cover,
                    alignment: Alignment.topCenter,
                  ),
                ),
              ),
              Container(
                decoration: const BoxDecoration(
                borderRadius: BorderRadius.circular(10), <-- here
                  gradient: LinearGradient(
                    colors: [
                      Colors.black,
                      Colors.transparent,
                    ],
                    begin: Alignment.bottomCenter,
                    end: Alignment.topCenter,
                    stops: [0.0, 0.75],
                  ),
                ),
              ),
        ...