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

Question

I am trying to put a plus sign in a tight frame at a very specific spot (at the right of the title text) but i cannot seem to do so

Do you know how I can do so?

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)
}

This is what it looks like right now, Somewhere in the circled spot in the same frame would be ideal.

image of current app

rob mayoff rob mayoff · Accepted Answer · 2022-01-11T18:09:52

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)
    }
}

Result:

Incidentally, your progress bar might look better if you calculate the width of the completion bar (the blue-green overlay) as height + (width - height) * percent / 100 instead of as width * percent / 100.

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

1 Answers