SwiftUI - 将 Button 的内容向左对齐

Posted 2023-02-24

【中文标题】SwiftUI - 将 Button 的内容向左对齐

【英文标题】：SwiftUI - Align contents of Button to the left

【发布时间】：2019-08-16 05:12:24

【问题描述】：

我的设计看起来像这样：

当我将它包裹在一个 Button 中时，图像和“HOME”文本会向中心移动：

我正在尝试使内容与左侧对齐，但我遇到了问题。这是组成这个组件的代码。

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)
        
    

【参考方案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 view 与您的矩形做同样的事情，而不是一个矩形

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

【参考方案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)

【参考方案3】：

您应该尝试为 HStack 添加 Spacer 和对齐方式

        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)

            Spacer()
            

【讨论】：

HStack 没有前导对齐

【参考方案4】：

尝试使用 maxWidth = .infinity 的垫片

Spacer().frame(maxWidth:.infinity)