swiftui-圆形矩形上的圆形图像

发布于 2025-02-11 00:57:44 字数 1971 浏览 2 评论 0原文

这些天，我看到了以下UI，那里有一个圆形圆形矩形左上方的圆圈。它是否有特定的控件或特定名称？

我想实施它，但不确定从哪里开始。我知道如何制作一个圆形的矩形，但不知道如何将图像放在左上角或右上角以获取RTL语言。我认为图像是一个覆盖层，但看起来不是。

关于如何进行的任何想法或指导将是很棒的。或者，如果您知道Swiftui中的任何图书馆都具有类似的东西，这将有助于我实施设计。

这是我的圆形矩形代码：

VStack {
    Rectangle().frame(height: 0).foregroundColor(Color.green)
    Text("Title text").lineLimit(2).font(.headline)
    Spacer()
    Text("Subtitle text").font(.footnote).fixedSize(horizontal: false, vertical: true)
    Divider()
}.padding(5).background(Color(red: 0 / 255, green: 94 / 255, blue: 149 / 255)).cornerRadius(10)

编辑： 为到目前为止尝试的某些内容添加代码。尝试添加一个偏移，该偏移确实将图像移到顶部，但图像确实被切断了。

VStack {
    Rectangle().frame(height: 0).foregroundColor(Color.green)
    ZStack {
        Circle()
            .foregroundColor(.white)
            .frame(width: 20, height: 20)
            .shadow(radius: 4)
        Image(systemName: "plus.circle.fill")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 20 , height: 20)
            .foregroundColor(Color.purple)
    }
    .offset(y: -30/2)
    Text("June 27, 2022").lineLimit(2).font(.headline)
    Spacer()
    Text("4:30 PM - 7:30 PM").lineLimit(2).font(.subheadline)
    Divider()
}.padding(5).background(Color(red: 34 / 255, green: 34 / 255, blue: 34 / 255)).cornerRadius(10)

这就是外观：

“ https://i.sstatic.net/emk3f.png” alt =“在此处输入图像说明”>

原文

I am seeing the below UI a lot these days where there is a circle with image on top left of rounded rectangle. Is there a specific control or specific name to it?

I wish to implement it, but not sure where to start. I know how to make a rounded rectangle, but no idea of how to place an image on top left corner or on top right for RTL language. I thought image is an overlay, but looks like it's not.

Any idea or guidance on how to go about it would be great. Or if you are aware of any library in SwiftUI which has something similar than that would help me to implement the design.

Here is my rounded rectangle code:

VStack {
    Rectangle().frame(height: 0).foregroundColor(Color.green)
    Text("Title text").lineLimit(2).font(.headline)
    Spacer()
    Text("Subtitle text").font(.footnote).fixedSize(horizontal: false, vertical: true)
    Divider()
}.padding(5).background(Color(red: 0 / 255, green: 94 / 255, blue: 149 / 255)).cornerRadius(10)

Edit: Adding code for something I tried so far. Tried adding an offset, which does move the image up top, but the image does get cut off.

VStack {
    Rectangle().frame(height: 0).foregroundColor(Color.green)
    ZStack {
        Circle()
            .foregroundColor(.white)
            .frame(width: 20, height: 20)
            .shadow(radius: 4)
        Image(systemName: "plus.circle.fill")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 20 , height: 20)
            .foregroundColor(Color.purple)
    }
    .offset(y: -30/2)
    Text("June 27, 2022").lineLimit(2).font(.headline)
    Spacer()
    Text("4:30 PM - 7:30 PM").lineLimit(2).font(.subheadline)
    Divider()
}.padding(5).background(Color(red: 34 / 255, green: 34 / 255, blue: 34 / 255)).cornerRadius(10)

This is how it looks: