HStack 中的 SwiftUI 按钮宽度不正确

Posted 2023-02-24

【中文标题】HStack 中的 SwiftUI 按钮宽度不正确

【英文标题】：SwiftUI Buttons in HStack not correct width

【发布时间】：2020-10-25 18:02:10

【问题描述】：

我在创建视图时遇到了一些问题。

内容视图

VStack
    Capsule()
        .fill(Color.white)
        .frame(width: 50, height: 5)
        .padding(.top)
        .padding(.bottom,5)
    
    Text("Hello world")
        .font(.title)
    //Time
    ScrollView(.horizontal)
        HStack(spacing: 0)
            Button(action: 
                
            , label: 
                Text("First")
            ).buttonStyle(TimeframeButtonStyle())
            Button(action: 
                
            , label: 
                Text("Second")
            ).buttonStyle(TimeframeButtonStyle())
            Button(action: 
                
            , label: 
                Text("Thirdiary")
            ).buttonStyle(TimeframeButtonStyle())
    
        .frame(height: 100)
        
    
    //Type
    HStack
        
    

按钮样式

struct TimeframeButtonStyle: ButtonStyle 
    func makeBody(configuration: Configuration) -> some View 
        configuration.label
            .frame(maxWidth: .infinity)
            .foregroundColor(.red)
            .lineLimit(1)
            .font(.title)
            .overlay(RoundedRectangle(cornerRadius: 25.0).stroke(Color.red, lineWidth: 1))
            
            .padding(.horizontal, 20)
            
    

如您所见，按钮位于滚动视图中，然后包含 HStack。 问题是按钮试图适应同一屏幕。

我正在寻找的是如何使按钮成为自然大小？

FixedSize 创建了这个，这使得标签太靠近边框

【参考方案1】：

如何使按钮自然大小？

你可以试试fixedSize():

Button(action: 
    
, label: 
    Text("First")
)
.buttonStyle(TimeframeButtonStyle())
.fixedSize()

【讨论】：

感谢您的回答帕韦洛。我已经尝试过了，它会导致标签出现一些问题。已更新我的问题以包含 fixedSize 的结果

@Pr0tonion 您可以将.padding() 应用到Text。