SwiftUI 与 HStack 的奇怪行为

Question

正如标题所说，我无法理解我的布局中的问题所在。

我创建了一个名为 SmallCard

的简单视图

struct SmallCard: View {
    var image: Image
    var title: String
    
    var body: some View {
        VStack(spacing: 0.0) {
            self.image
                .resizable()
                .scaledToFit()
            
            ZStack {
                Color.white
                
                VStack(alignment: .leading) {
                    Text(self.title)
                        .padding([.vertical])
                }
                
            }
        }
        .rounded(radius: 10)
        .shadow(radius: 2.0)
    }
}

struct SmallCard_Previews: PreviewProvider {
    static var previews: some View {
        SmallCard(image: Image("img02"), title: "Card title")
    }
}

这个结果

然后我创建了另一个名为 TestExploreCards

的视图

struct TestExploreCards: View {
    var body: some View {
        ScrollView {
            HStack(alignment: .center, spacing: 8.0) {
                SmallCard(image: Image("img04"),
                                    title: "Card title 01")
                
                SmallCard(image: Image("img05"),
                                    title: "Card title 03")
            }
        }
    }
}

struct TestExploreCards_Previews: PreviewProvider {
    static var previews: some View {
        TestExploreCards()
    }
}

我放两个 SmallCard 得到但我得到

正如您在 SmallCard 预览中看到的那样 Image 与下面的视图宽度相同，但是当我将 HStack 与另一个 SmallCard 实例一起放入时它不是。我不知道错误在哪里：\

需要说明的是，rounded 是一个 View 扩展

extension View {
    func rounded(radius: CGFloat = 25.0) -> some View {
        self.clipShape(RoundedRectangle(cornerRadius: radius, style: .continuous))
    }
}

Answer 1

HStack 填满了宽度，但图像试图按其比例适应内容。

修改后的代码如下：

struct SmallCard: View {
    var image: Image
    var title: String
    
    var body: some View {
        VStack(spacing: 0.0) {
            self.image
                .resizable()
                .scaledToFill()
            
            VStack(alignment: .leading) {
                Text(self.title)
                    .padding(.vertical)
                    .frame(maxWidth: .infinity)
            }
            .background(
                Color.white
            )
            
        }
        .frame(minHeight: 250.0)
        .rounded(radius: 10)
        .fixedSize(horizontal: false, vertical: true)
        .shadow(radius: 2.0)
    }
}

struct TestExploreCards: View {
    var body: some View {
        ScrollView {
            HStack(alignment: .center, spacing: 8.0) {
                SmallCard(image: Image("img04"),
                          title: "Card title 01")
                
                SmallCard(image: Image("img05"),
                          title: "Card title 03")
            }
        }
        .padding()
    }
}

struct TestExploreCards_Previews: PreviewProvider {
    static var previews: some View {
        TestExploreCards()
    }
}

extension View {
    func rounded(radius: CGFloat = 25.0) -> some View {
        self.clipShape(RoundedRectangle(cornerRadius: radius))
    }
}

结果：

SwiftUI 与 HStack 的奇怪行为

SwiftUI strange behaviour with HStack

ios

swift

swiftui