如何使用SwiftUI将视图拉伸到其父框架?

时间:2019-06-17 11:40:27

标签: swift swiftui

在下面看到的图像和我要拉伸到红色边框的黑色正方形。

我尝试了以下

import SwiftUI
struct ContentView : View {
    var body: some View {
        HStack(spacing: 1) {
            Rectangle().frame(width:20).foregroundColor(.red).frame(width:20)
            ScrollView {
                VStack {
                    ForEach(0..<5) { index in
                        Rectangle().frame(minWidth: 50, maxWidth: .infinity, minHeight: 50, maxHeight: 50)
                    }
                }.relativeWidth(1)
            }
            Rectangle().foregroundColor(.red).frame(width:20)
        }
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View { ContentView() }
}
#endif

但是结果是这样的:

enter image description here

3 个答案:

答案 0 :(得分:4)

您可以使用GeometryReader并将ScrollView包裹到其中,并将内容宽度设置为几何图形的宽度大小。 GeometryReader

  

将灵活的首选尺寸返回其父版式。

所以您的代码将如下所示:

HStack(spacing: 1) {
     Rectangle().frame(width:20).foregroundColor(.red).frame(width:20)
     GeometryReader { geometry in
          ScrollView {
               VStack {
                    ForEach(0..<5) { index in
                         Rectangle().frame(minWidth: 50, maxWidth: .infinity, minHeight: 50, maxHeight: 50)
                    }
                }.relativeWidth(1)
               .frame(width: geometry.size.width)
          }
     }
     Rectangle().foregroundColor(.red).frame(width:20)
}

答案 1 :(得分:0)

另一种(较少)丑陋的技巧可以修复ScrollView在SwiftUI中的宽度:

ScrollView {
    // ...
    Divider().opacity(0)
}

答案 2 :(得分:0)

以下内容还会为您提供所需的结果:

d = { x : y  for x , y in df.groupby(s)}

d[1] # output put rank one