如何在不填充视图的情况下使用 GeometryReader

Posted 2023-02-24

【中文标题】如何在不填充视图的情况下使用 GeometryReader

【英文标题】：How to use GeometryReader without it filling the View

【发布时间】：2020-02-14 14:10:29

【问题描述】：

这是我想要的布局。

import SwiftUI
import PlaygroundSupport

struct TestView: View 
        
    let text: String
    
    var body: some View 
        Text(self.text)
    


struct ContentView: View 
    var body: some View 
        ZStack 
            TestView(text: "bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla")
                .frame(width: 250)
                .background(Color.red)
        
    


PlaygroundPage.current.setLiveView(ContentView())

但我也想使用GeometryReader，当我将Text 放在GeometryReader 中时，它会占据整个高度。

import SwiftUI
import PlaygroundSupport

struct TestView: View 
        
    let text: String
    
    var body: some View 
        GeometryReader  reader in
            Text(self.text)
        
    


struct ContentView: View 
    var body: some View 
        ZStack 
            TestView(text: "bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla")
                .frame(width: 250)
                .background(Color.red)
        
    


PlaygroundPage.current.setLiveView(ContentView())

我该如何解决这个问题？

【问题讨论】：

这不是一个错误 - 这是一个预期的功能。

我知道但是如何使用geometryreader实现顶部布局？

在几何图形中使用 vstack 并在文本后使用 Spacer()？

【参考方案1】：

警告⚠️：这是几何阅读器无法帮助我学习几何的时候，我开始用头撞墙

您可以这样做：

struct ContentView: View 

    var text =  "bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla"
    var width : CGFloat = 250

    var height: CGFloat 
        var size : CGFloat
        let chars = self.width / 14  // assuming width of 1 character is 14 which is the case by default for Text view
        let lines = CGFloat(text.count) / chars
        size = CGFloat(14 * (lines + 1))
        return size
    

    var body: some View 
        ZStack 
            TestView(text: text)
            .frame(width: width, height: height)
            .background(Color.red)
        
    

使用 height 作为计算属性手动设置 TestView 的高度。

关于我如何估计默认字体高度的背景故事

按 shift + 命令 + 4 使用指针，找出相对 y 位置之间的差异