distance between ui components in swiftUi - swiftui

Question

I want to have a constant distance between the image and the text , I also want to have a constant distance between the image and trailing anchor of the green box.using padding and increase the length of the text the problem appears as you seen win the picture. how can I solve this problem? how can use auto layout in swiftUi the same way as UIKit?
import SwiftUI
struct SwiftUIView: View {
var orgName:String
var imgName:String
var body: some View {
ZStack{
RoundedRectangle(cornerRadius: 8)
.fill(Color.green)
.frame( height: 50)
.padding([.trailing, .leading], 20)
.padding([.top, .bottom], 10)
.overlay(
HStack(spacing: 10){
Text("\(orgName)")
.frame(width: .infinity, height: 50)
//Image( "\(imgName)")
Image( systemName: "phone.fill")}
//.padding(.trailing
// ,UIScreen.main.bounds.size.width-480)
)
}
}
}
struct SwiftUIView_Previews: PreviewProvider {
static var previews: some View {
SwiftUIView(orgName:"aaaaa", imgName:"aimg")
}
}

Answer 1

In SwiftUI the order of modifiers matters! You need to set the overlay before the paddings.

Answer 2

You can use the below code for Overlay HStackView padding -
struct SwiftUIView: View {
var orgName:String
var imgName:String
var body: some View {
ZStack{
RoundedRectangle(cornerRadius: 8)
.fill(Color.green)
.frame( height: 50)
.overlay(
HStack {
Text("\(orgName)")
.frame(width: .infinity, height: 50)
Image(systemName: "phone.fill")
}.padding(),
alignment: .trailing
)
.padding([.top, .bottom], 10)
.padding([.trailing, .leading], 20)
}
}
}
Please check the result for your updated code here -

Answer 3

The important thing is swiftUI modifiers should use in correct order
So You can simply use paddings instead of frames. Then this will responsive for all devices as well.
import SwiftUI
struct SwiftUIView: View {
//MARK: - PRROPERTIES
var orgName:String
//MARK: - BODY
var body: some View {
HStack(spacing: 10){
Spacer()
Text("\(orgName)")
Image( systemName: "phone.fill")
}
.padding(.vertical , 15)
.padding(.horizontal, 10)
.background(
RoundedRectangle(cornerRadius: 8)
.fill(Color.green)
)
.padding(.horizontal, 15)
}
}
//MARK: - PREVIEW
struct SwiftUIView_Previews: PreviewProvider {
static var previews: some View {
SwiftUIView(orgName:"aaaaaa")
}
}
preview