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

【问题标题】：How to use GeometryReader without it filling the View如何在不填充视图的情况下使用 GeometryReader
【发布时间】：2024-12-22 02:30:02
【问题描述】：

这是我想要的布局。

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()？

标签： layout swiftui geometryreader

【解决方案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 位置之间的差异

【讨论】：