具有不均匀大小元素的 SwiftUI HStack

Question

Desired output

寻找一种在不均匀元素中拆分 HStack 的方法，一个占据屏幕的 1/2，另外两个占据屏幕的 1/4(见附件)。

代码:

   struct MyCategoryRow: View {

    var body: some View {
      VStack(alignment: .leading, spacing: 0) {
         HStack(spacing: 0) {
            ForEach(0...2, id: \.self) { block in

                   ColoredBlock()

            }.frame(minWidth: 0, maxWidth: .infinity, alignment: Alignment.topLeading)

      }
    }
  }

所以上面的代码产生了一个具有 3 个等宽颜色块的 HStack。我尝试使用 UIScreen.main.bounds.width 强制宽度，但这种方法不适应方向的变化。我也试过像这样使用 GeometryReader:

 GeometryReader {  g in
       ColoredBlock().frame(width: block == 0 ? g.size.width * 2 : g.size.width / 2) 
 }

但这也不起作用，似乎每个 ColoredBlock 将占用 HStack 的 1/3 的事实是事先决定的。

使用 layoutPriority 尝试更新:

struct MyCategoryRow: View {
    var body: some View {
      VStack(alignment: .leading, spacing: 0) {
         HStack(spacing: 0) {
            ForEach(0...2, id: \.self) { block in        
                   ColoredBlock(background: (block == 0) ? Constants.pastel1 : Constants.pastel2).layoutPriority(block == 0 ? 1.0 : 0.5)             
            }.frame(minWidth: 0, maxWidth: .infinity, alignment: Alignment.topLeading)         
      }
    }
  }


struct ColoredBlock: View {
    let background: Color

var body: some View {
    GeometryReader { geometry in
      VStack(spacing: 0){
         HStack {
           Text("Some text").padding(.horizontal, 15).padding(.top, 15)
         }.frame(alignment: .leading)
         VStack(alignment: .leading){
           Text("Some more text").font(.subheadline).fontWeight(.light)
         }.padding(.vertical, 10).padding(.horizontal, 15)
     }.background(self.background)
                .cornerRadius(15)
   }
  }
}

Result:

Answer 1

我认为你需要的是 .layoutPriority。将第一个块设置为 1.0，将第二个和第三个块设置为 0.5。