如何将图像（加号）放在 swiftui 中自定义框架的右上角？

Question

我想在一个非常特定的位置（在标题文本的右侧）的紧凑框架中放置一个加号，但我似乎无法这样做

你知道我该怎么做吗？

var body: some View {
    VStack {
        HStack {
            Image(systemName: "plus")
            VStack(alignment: .leading, spacing: 15) {
                Text("This Month's Goal")
                    .bold()
                    .frame(width: 300, height: 10, alignment: .center)
                Text("100 out of 2000")
                    .frame(width: 300, height: 10, alignment: .center)

                //replace percent with percent and code percent to move with data
                ProgressBarView(width: 300, height: 30, percent: 50, color1: Color(#colorLiteral(red: 0.01413772535, green: 0.2225477993, blue: 0.9861308932, alpha: 1)), color2: Color(#colorLiteral(red: 0.5605781674, green: 0.9172690511, blue: 0.8047055602, alpha: 1)))
            }
            Spacer()
        }
        .padding()
    }
    .background(Color.white)
    .frame(width: 350, height: 120, alignment: .center)
    .cornerRadius(25.0)
}

这是现在的样子，在同一帧的圆圈内的某个地方是最理想的。

Answer 1

struct TestView: View {
    var body: some View {
        VStack {
            HStack {
                Image(systemName: "plus")
                VStack(alignment: .leading, spacing: 15) {
                    ZStack(alignment: .trailing) {
                        VStack {
                            Text("This Month's Goal")
                                .bold()
                                .frame(width: 300, height: 10, alignment: .center)
                            Text("100 out of 2000")
                                .frame(width: 300, height: 10, alignment: .center)
                        }

                        Button(
                            action: { },
                            label: { Image(systemName: "plus.circle") }
                        )
                    }

                    //replace percent with percent and code percent to move with data
                    ProgressBarView(width: 300, height: 30, percent: 50, color1: Color(#colorLiteral(red: 0.01413772535, green: 0.2225477993, blue: 0.9861308932, alpha: 1)), color2: Color(#colorLiteral(red: 0.5605781674, green: 0.9172690511, blue: 0.8047055602, alpha: 1)))
                }
                Spacer()
            }
            .padding()
        }
        .background(Color.white)
        .frame(width: 350, height: 120, alignment: .center)
        .cornerRadius(25.0)
    }
}

结果：

顺便说一下，如果您将完成栏（蓝绿色叠加层）的宽度计算为 height + (width - height) * percent / 100 而不是 width * percent / 100.

，您的进度条可能看起来会更好

如何将图像（加号）放在 swiftui 中自定义框架的右上角？

How to place Image(plus) to top right of custom frame in swiftui?

iphone

xcode

ios

swift

swiftui