如何在不填充View的情况下使用GeometryReader [英] How to use GeometryReader without it filling the View

问题描述

这是我想要的布局.

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内时，它将占据整个高度.

But I also want to use the GeometryReader and when I put the Text inside the GeometryReader it will take up the full height.

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

我该如何解决?

推荐答案

警告⚠️:这是当Geomtery读者无法帮助我解决几何问题时，我开始把头撞在墙上

这是您可以做的:

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的高度.

Set the height of the TestView manually by using height as a computed property.

有关如何估算默认字体高度的背景故事

A background story on how I estimated default font height

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

Press shift + command + 4 Use the pointer and find the difference between the relative y positions

这篇关于如何在不填充View的情况下使用GeometryReader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！