SwiftUI，ScrollView 在 ZStack 中向上推送 VStack 图像

Posted 2023-02-24

【中文标题】SwiftUI，ScrollView 在 ZStack 中向上推送 VStack 图像

【英文标题】：SwiftUI, ScrollView pushing VStack images up in ZStack

【发布时间】：2019-12-19 03:50:28

【问题描述】：

当我应用scrollview 时，它会将我的整个视图向上推，并在ZStack 的底部下方留下一个空白区域。不知道为什么，但如果有人可以请帮助。

var body: some View 


        ZStack
            GeometryReader  geometry in
            Spacer()
             ScrollView (.vertical, showsIndicators: false) 
            VStack (spacing : self.Vspacing)
                Spacer()
                ForEach (self.buttons, id: \.self)  row in
                    SportsButtonsRow(screenWidth: geometry.size.width,
                                     Hspacing: self.Hspacing,
                                     buttons: row,  didTapButton:  sportButton in self.displayText = sportButton.title
                                    )
                //end foreach
               //  Spacer ()
            .background(Color.black)//end of VStack
        //end of scroll view
                 //close geometry reader
    //end of ZStack
        .edgesIgnoringSafeArea(.all)

//end of main some View

【参考方案1】：

您需要更改容器的构建顺序。以下暂存演示有效：

var body: some View 
        ZStack
            GeometryReader  geometry in
                ScrollView (.vertical, showsIndicators: false) 

                // YOUR CONTENT HERE

                
                .background(Color.black)//end of VStack
                .frame(height: geometry.size.height)
                //end of scroll view
         //close geometry reader
        .edgesIgnoringSafeArea(.all)
     //end of ZStack
 //end of main some View

【讨论】：

我编辑了上面的问题，以获得我目前在我的项目中拥有的内容，以及您的建议。我还检查了我拥有的 Xcode 11.2。我在上图中看到了这个结果。

【参考方案2】：

我想通了。看来您需要为滚动视图指定一个框架大小，所以我这样做了。

       GeometryReader  geometry in
            Spacer()
                VStack
                    Text ("fdklafdfa")
                        .foregroundColor(.blue)
                         .frame(width: geometry.size.width, height:geometry.size.height * 0.32 , alignment: .bottom)
                    Spacer()

                    ScrollView (.vertical, showsIndicators: false) 

                             VStack (spacing : self.Vspacing)
                                 Spacer()
                                 ForEach (self.buttons, id: \.self)  row in
                                     SportsButtonsRow(screenWidth: geometry.size.width,
                                                      Hspacing: self.Hspacing,
                                                      buttons: row,  didTapButton:  sportButton in self.displayText = sportButton.title
                                                     )
                                 //end foreach
                                //  Spacer ()
                             //end of VStack
                         //end of scroll view
                        .frame(width: geometry.size.width, height:geometry.size.height * 0.68 , alignment: .bottom)
                        .edgesIgnoringSafeArea(.all)
                        .background(Color.black)
                //End of main VStack

                 //close geometry reader