SwiftUI中的不等大小元素HStack

Question

期望输出结果

寻找一种方法来分割一个HStack中的不均匀元素，其中一个元素占据屏幕的一半，另外两个元素各占屏幕的四分之一（见附件）。

代码：

   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)

      }
    }
  }

因此，上面的代码会生成一个具有相等宽度的三个带颜色块的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:

- sugar2code

Answer 1

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

- Michael Long

---

谢谢！我已经更新了我的问题，并尝试实现您的建议。结果是第一个块现在占据了大约90%的屏幕。我也添加了ColoredBlock的代码，也许我在那里做错了什么。 - sugar2code

Answer 2

我最终做的是在MyCategoryRow中使用GeometryReader而不是ColoredBlock，并将宽度传递给ColoredBlock。

HStack {
    ForEach(0...2, id: \.self) { block in
        ColoredBlock(background: (block == 0) ? Constants.pastel1 : Constants.pastel2, width: block == 0 ? geometry.size.width / 2 : geometry.size.width / 4, height: 150.0)
     }
}

这个方法是可行的，但现在我发现自己必须指定一个高度，而我不想硬编码。如果有更好的解决方案，请告诉我！

- sugar2code