将 GeometryReader 与 ScrollView 一起使用 [英] Using GeometryReader with ScrollView

问题描述

我正在尝试使用 GeometryReader 将 maxHeight 分配给 Scrollview 中的列表.
出于这个问题的目的，我创建了以下项目:

这是我的 ContentView 代码，如果有人知道我做错了什么......

struct ContentView: 查看 {let arrayWithStuff = [一"，二"，三"，四"，五"，六"，七"，八"，九"，十"，十一"，十二""]var heightOfView: CGFloat = 0.0//由 GeometryReader 设置var主体:一些视图{let myString = "Top of Test App"返回 ZStack {GeometryReader { g inheightOfView = g.size.height导航视图{打印(视图高度:\(heightOfView)")滚动视图{虚拟堆栈{文本(我的字符串).填充()分隔线()self.ViewBody()}//Vstack 结束.navigationBarTitle("Test App", displayMode: .inline)}//滚动视图结束}//导航视图结束}//几何阅读器结束}//Zstack结束}//正文结束@ViewBuilder func ViewBody() ->一些视图{虚拟堆栈{列表 {ForEach (self.arrayWithStuff, id: \.self) { item in文本(项目)}}//列表结束.frame(maxHeight: heightOfView*0.5)分隔线()Text("测试APP底部")}.填充()}}

再次，任何帮助将不胜感激.

解决方案

这里是可能的解决方案的演示.使用 Xcode 11.4 测试.

struct ContentView: 查看 {let arrayWithStuff = [一"，二"，三"，四"，五"，六"，七"，八"，九"，十"，十一"，十二""]var主体:一些视图{let myString = "Top of Test App"返回 ZStack {GeometryReader { g in导航视图{滚动视图{虚拟堆栈{文本(我的字符串).填充()分隔线()self.ViewBody(高度:g.size.height)}//Vstack 结束.navigationBarTitle("Test App", displayMode: .inline)}//滚动视图结束}//导航视图结束}//几何阅读器结束}//Zstack结束}//正文结束func ViewBody(height: CGFloat) ->一些视图{打印(视图高度:\(高度)")返回 VStack {列表 {ForEach (self.arrayWithStuff, id: \.self) { item in文本(项目)}}//列表结束.frame(高度:高度*0.5)分隔线()Text("测试APP底部")}.填充()}}

I'm trying to use GeometryReader to assign a maxHeight to a list in a Scrollview.
For the purpose of this question, I created the following project : GeometryReaderTesting.

It sets up a ContentView with a :
- Text.
- List.
- Text.
I extracted the List and last Text into their own view, using @ViewBuilder and I want to set the maxHeight of the List to .5 the height of my user's screen.

The problem is that the app won't build with the following errors, and the GeometryReader doesn't seem to be computing the correct height:

Here is my ContentView code, if anyone has an idea of what I'm doing wrong...

struct ContentView: View {

    let arrayWithStuff = [ "one","two","three","four","five","six","seven","eight","nine","ten", "eleven", "twelve"]

    var heightOfView: CGFloat = 0.0 // To be set by GeometryReader

    var body: some View {

    let myString = "Top of Test App"

     return   ZStack {
            GeometryReader { g in
                heightOfView = g.size.height
        NavigationView {

            print("height of view : \(heightOfView)")
             ScrollView {
                VStack {
                    Text(myString)
                    .padding()
                    Divider()
                    self.ViewBody()
                } // END of Vstack
                    .navigationBarTitle("Test App", displayMode: .inline)
            } // END of Scrollview
                }//End of NavigationView
            } // End of Geometry reader
        } // End of Zstack

  } // End of body


    @ViewBuilder func ViewBody() -> some View {
        VStack {
            List {
                ForEach (self.arrayWithStuff, id: \.self) { item in
                    Text(item) }
            } // END of List
                .frame(maxHeight: heightOfView*0.5)
            Divider()
            Text("Bottom of TEST APP")
        }
        .padding()
    }
}

Again, any help would be appreciated.

解决方案

Here is a demo of possible solution. Tested with Xcode 11.4.

struct ContentView: View {

    let arrayWithStuff = [ "one","two","three","four","five","six","seven","eight","nine","ten", "eleven", "twelve"]

    var body: some View {

        let myString = "Top of Test App"

        return   ZStack {
            GeometryReader { g in
                NavigationView {
                    ScrollView {
                        VStack {
                            Text(myString)
                                .padding()
                            Divider()
                            self.ViewBody(height: g.size.height)
                        } // END of Vstack
                            .navigationBarTitle("Test App", displayMode: .inline)
                    } // END of Scrollview
                }//End of NavigationView
            } // End of Geometry reader
        } // End of Zstack

    } // End of body


    func ViewBody(height: CGFloat) -> some View {
        print("height of view : \(height)")
        return VStack {
            List {
                ForEach (self.arrayWithStuff, id: \.self) { item in
                    Text(item) }
            } // END of List
                .frame(height: height*0.5)
            Divider()
            Text("Bottom of TEST APP")
        }
        .padding()
    }
}

这篇关于将 GeometryReader 与 ScrollView 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！