拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 在swiftUI中为影像添加带有圆角半径的圆形影像视图

在swiftUI中为影像添加带有圆角半径的圆形影像视图

白鹭 - 2022-03-04 2169 0 0

如何添加类似于以下附件的圆形视图。在附件中,检查是影像图示,我想在圆形中添加绿色背景色。我在 Swift 中有一个解决方案,但无法在 swiftUI 中实作相同的解决方案。

与我的问题相关的帖子:Add a border with cornerRadius to an Image in SwiftUI Xcode beta 5但是,这并不能解决我的问题。

此实作的 Swift 代码:

var imageView = UIImageView()
override init(theme: Theme) {
    super.init(theme: theme)
    imageView.clipsToBounds = true
    setLayout()
  }

override func layoutSubviews() {
    super.layoutSubviews()
    let cornerRadius = frame.height / 2
    imageView.setCornerRadius(cornerRadius)
    setCornerRadius(cornerRadius)
  }

在 swiftUI 中为影像添加带有圆角半径的圆形影像视图

uj5u.com热心网友回复:

您可以创建此影像,例如...

Image(systemName: "checkmark")
  .resizable()
  .frame(width: 20, height: 20)
  .foregroundColor(.white)
  .padding(20)
  .background(Color.green)
  .clipShape(Circle())

或者替代...

Image(systemName: "checkmark.circle.fill")
  .resizable
  .frame(width: 40, height: 40) // put your sizes here
  .foregroundColor(.green)

uj5u.com热心网友回复:

这不是最简单的事情。将此结构用作单独的视图。它将回传在圆圈上适当大小的影像。

struct ImageOnCircle: View {
    
    let icon: String
    let radius: CGFloat
    let circleColor: Color
    let imageColor: Color // Remove this for an image in your assets folder.
    var squareSide: CGFloat {
        2.0.squareRoot() * radius
    }
    
    var body: some View {
        ZStack {
            Circle()
                .fill(circleColor)
                .frame(width: radius * 2, height: radius * 2)
            
            // Use this implementation for an SF Symbol
            Image(systemName: icon)
                .resizable()
                .aspectRatio(1.0, contentMode: .fit)
                .frame(width: squareSide, height: squareSide)
                .foregroundColor(imageColor)
            
            // Use this implementation for an image in your assets folder.
//            Image(icon)
//                .resizable()
//                .aspectRatio(1.0, contentMode: .fit)
//                .frame(width: squareSide, height: squareSide)
        }
    }
}
标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *