SwiftUI GeometryReader 体积小巧

Posted

技术标签:

【中文标题】SwiftUI GeometryReader 体积小巧【英文标题】:SwiftUI GeometryReader compact size 【发布时间】:2020-04-19 06:34:24 【问题描述】:

我希望我的LoadingTitle 的宽度为屏幕的 70%,因此我使用了GeometryReader,但它会使垂直尺寸扩大,而我的LoadingTitle 占用更多的垂直空间。我希望它尽可能紧凑。

当使用硬编码width: 300 时,我得到了正确的布局(相对宽度除外):

struct ContentView: View 
    var body: some View 
        VStack(alignment: .leading, spacing: 0) 
            LoadingTitle()
            Color.blue
        
    


struct LoadingTitle: View 
    var body: some View 
        HStack() 
                Color.gray
            
            .frame(width: 300, height: 22)
            .padding(.vertical, 20)
            .border(Color.gray, width: 1)
    

现在,如果我将LoadingTitlebody 包装在GeometryReader 中,我可以获得正确的相对大小,但GeometryReader 会垂直扩展我的视图:

struct LoadingTitle: View 

    var body: some View 
        GeometryReader  geo in
            HStack() 
                Color.gray
                    .frame(width: geo.size.width * 0.7, height: 22, alignment: .leading)
                Spacer()
            
            .padding(.vertical, 20)
            .border(Color.gray, width: 1)
        
    

我尝试在GeometryReader 上将.fixedSize(horizontal: false, vertical: true) 用作other suggested,但结果视图过于紧凑,并且其所有填充都被忽略了:

如何以相对宽度实现第一个屏幕截图的布局?

【问题讨论】:

【参考方案1】:

这是可能的方法。使用 Xcode 11.4 / ios 13.4 测试(未更改 ContentView)

struct LoadingTitle: View 

    var body: some View 
        VStack  Color.clear 
            .frame(height: 22).frame(maxWidth: .infinity)
            .padding(.vertical, 20)
            .overlay(
                GeometryReader  geo in
                    HStack 
                        HStack 
                            Color.gray
                                .frame(width: geo.size.width * 0.7, height: 22)
                        
                        .padding(.vertical, 20)
                        .border(Color.gray, width: 1)
                        Spacer()
                    
                
            )
    

【讨论】:

很好,谢谢。我相信我们也可以使用Group 代替VStack 并从GeometryReader 中删除外部HStack【参考方案2】:

由于标题的高度是固定的,

struct LoadingTitle1: View 
    var body: some View 
        GeometryReader  geo in
            HStack 
                Color.gray.frame(width: geo.size.width * 0.7)
                .padding(.vertical, 20)
                .border(Color.gray, width: 1)
                
                Spacer()
            
        .frame(height: 62)
    

【讨论】:

以上是关于SwiftUI GeometryReader 体积小巧的主要内容,如果未能解决你的问题,请参考以下文章

SwiftUI - 计算 ScrollView 中长 GeometryReader 的高度

SwiftUI - AppStorage 不适用于 GeometryReader

我们如何在 SwiftUI 中制作自定义 GeometryReader?

在 ScrollView 中使用 GeometryReader 的 SwiftUI 布局

SwiftUI - 如何从不同的视图中获取 GeometryReader 的大小/高度?

SwiftUI:如何在这种情况下将 .overlay 与 GeometryReader 一起使用?