SwiftUI - 将按钮的内容向左对齐

Question

我有一个看起来像这样的设计：

当我将它包裹在一个按钮中时，图像和“主页”文本向中心移动：

我试图保持内容与左侧对齐，但我遇到了问题。下面是组成这个组件的代码。

struct HomeSection: View {
var body: some View {
    Button(action: {

    }) {
        Group {
            Spacer().frame(width: 0, height: 36.0, alignment: .topLeading)
            HStack {
                Image("home")
                    .resizable()
                    .frame(width: 24, height: 24)
                    .foregroundColor(.navigationTextGrey)

                Text("HOME")
                    .bold()
                    .font(.system(size: 17.0))
                    .foregroundColor(Color.navigationTextGrey)
                    .padding(.leading, 4.0)
            }
            Rectangle()
                .fill(Color.navigationTextGrey)
                .frame(width: UIScreen.main.bounds.width - 60, height: 1)
                .padding(.top, 6.0)
        }
    }
}
}

Answer 1

您可以向 HStack 和填充添加一个间隔器以将房屋图像与矩形对齐。

    var body: some View {
        Button(action: {
        }) {
            Group {
                Spacer().frame(width: 0, height: 36.0, alignment: .topLeading)
                HStack {
                    Image("home")
                        .resizable()
                        .frame(width: 24, height: 24)
                        .foregroundColor(.navigationTextGrey)
                        .padding(.leading, 30.0)
                    Text("HOME")
                        .bold()
                        .font(.system(size: 17.0))
                        .foregroundColor(Color.navigationTextGrey)
                        .padding(.leading, 4.0)
                    Spacer()
                }
                Rectangle()
                    .fill(Color.navigationTextGrey)
                    .frame(width: UIScreen.main.bounds.width - 60, height: 1)
                    .padding(.top, 6.0)
            }
        }
    }

这是最终结果：

此外，如果您想稍微清理一下代码，那么除了矩形之外，还有一个与矩形执行相同操作的分隔视图

Divider()
       .padding([.leading, .trailing], 30)

Answer 2

是的，这可以清理很多。

var body: some View {
    Button(action: {
    }) {
        VStack(spacing: 6) {
            HStack(spacing: 4) {
                Image("home")
                    .resizable()
                    .frame(width: 24, height: 24)
                Text("HOME")
                    .bold()
                    .font(.system(size: 17.0))
                Spacer()
            }
            Divider()
        }
    }
    .foregroundColor(.navigationTextGrey)
    .padding([.leading, .trailing], 30)
}