Question

我创建了一个UIView，并在UIView中添加了一个Imageview。我给了UIView角半径，它可以工作，现在的问题是放置在其中的图像不考虑视图的角半径，结果，它将整个图像显示为矩形，而不是具有左上角和topRight角弯曲到与UIView相同的半径。我的代码如下所示。

Widget buildTopNews(BuildContext context) {
  return Container(
    padding: EdgeInsets.only(bottom: 20),
    child: MediaQuery.of(context).orientation == Orientation.portrait
        ? ListView.separated(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemBuilder: (BuildContext context, int index) {
              return NewsCard(
                news: topNews[index],
              );
            },
            itemCount: topNews.length,
            separatorBuilder: (BuildContext context, int index) {
              return SizedBox(
                height: 20,
              );
            },
          )
        : GridView.builder(
            physics: NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: topNews.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 20,
            ),
            itemBuilder: (BuildContext context, int index) {
              return NewsCard(
                news: topNews[index],
              );
            },
          ),
  );
}

这给出了四舍五入的卡片视图

let bgView: UIView = {
        let bgView = UIView()
        bgView.backgroundColor = .white
        return bgView
    }()

    let propertyImage: DefaultImageView = {
        let img = DefaultImageView(frame: .zero)
        img.clipsToBounds = true
        img.layer.masksToBounds = true
        img.image = #imageLiteral(resourceName: "icons8-name-filled-30")
        img.contentMode = .scaleToFill
        return img
    }()

所以我添加了extension UIView { func addShadowAndRoundCorners() { layer.shadowOpacity = 1 layer.shadowOffset = CGSize.zero layer.shadowColor = UIColor.darkGray.cgColor layer.cornerRadius = 12 } }之类的圆形样式

如何使imageview与UIView的圆角保持一致

Answer 1

将clipsToBounds设置为yes时，也需要将其添加到容器视图中，以强制子视图不呈现在外部：

bgView.clipsToBounds = true

或者您也可以只对imageView本身进行四舍五入。

Answer 2

如果只希望对UIImageView的topLeft和topRight角进行四舍五入，则可能必须在显示图像之前使用遮罩。

创建一个与图像大小相同的CGContext，在CGContext中创建遮罩，然后将图像绘制到上下文中，将应用遮罩，然后从上下文中获取新图像并将其放在.image中UIImageView。

圆形的UIView swift中的UIImage

2 个答案: