如何使用 SwiftUI 将 Stacks 固定在顶部和底部

Posted 2023-02-25

【中文标题】如何使用 SwiftUI 将 Stacks 固定在顶部和底部

【英文标题】：How fix Stacks to top and bottom using SwiftUI

【发布时间】：2021-03-18 21:15:03

【问题描述】：

你好吗？

我需要将第一个 zstack 的所有内容（我使用两个 zstack 在第一个 zstack 背景上添加一个透明层）适应窗口大小，如果用户向下滚动，则会显示下面添加的其他堆栈。

我添加 Spacer() 以将最后一个 HStack 推到底部，然后将堆栈推到顶部（中间必须是动态空白区域）的窗口没有结果。

可以帮帮我吗？

谢谢

ScrollView(.vertical) 
            ZStack 
                bgColors[weatherDescription]
                ZStack 
                    LinearGradient(gradient: Gradient(colors: [Color(hex: 0x212121, alpha: 0.5), Color(hex: 0x212121, alpha: 0.5)]), startPoint: .top, endPoint: .bottom)
                    
                    VStack(alignment: .leading) 

                        Text("Hello!")
                            .foregroundColor(Color.white)
                            .fontWeight(.heavy)
                            .font(.largeTitle)
                            .padding(.top, 20)
                            .padding(.bottom, 1)
                        Text("Hello!")
                            .foregroundColor(Color.white)
                            .font(.title)
                            .padding(.bottom, 1)
                        Text("Hello!")
                            .foregroundColor(Color.white)
                            .font(.title3)
                            .padding(.bottom, 20)
                        
                        HStack(alignment: .center, content: 
                            Text("TEXT1")
                                .foregroundColor(Color.white)
                                .font(.title3).fontWeight(.bold)
                                .frame(maxWidth: .infinity, alignment: .leading)
                            Text("TEXT2")
                                .foregroundColor(Color.white)
                                .font(.title3).fontWeight(.bold)
                                .frame(maxWidth: .infinity, alignment: .trailing)
                        ).frame(maxWidth: .infinity)

                        Spacer()

                        HStack(alignment: .center, spacing: 30, content: 
                            Text("Text1")
                                .foregroundColor(Color.white)
                                .font(.system(size: 90))
                            Text("Text2")
                                .foregroundColor(Color.white)
                                .font(.caption)
                                .animation(.easeIn)
                        ).frame(width: .infinity, alignment: .bottom)

                    .padding() // vstack
                .edgesIgnoringSafeArea(.top) // zstack
            .edgesIgnoringSafeArea(.top) // zstack

         // ADITIONALS STACKS VISIBLES ONLY WHEN SCROLL DOWN

        

【问题讨论】：

尝试将.padding(.bottom, UIScreen.main.bounds.height) 的填充添加到ZStack。如果您的视图没有占据整个屏幕，您可能需要 GeometryReader。

【参考方案1】：

您刚刚使用了这么多代码，我将它们编辑为更少的代码，例如您刚刚使用了这么多 foregroundColor，您可以在我的代码中看到我只在父视图上使用过一次。

我们也不能像你用的那样使用 ScrollView！ ScrollView 需要 Content 来滚动，你的 Content 少了。

---

---

import SwiftUI

struct ContentView: View 
    var body: some View 
        
        ZStack 
            
            LinearGradient(gradient: Gradient(colors: [Color.red, Color.purple]), startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()
            
            VStack(alignment: .leading, spacing: 30) 
                
                Text("Hello!")
                    .fontWeight(.heavy)
                    .font(.largeTitle)

                
                Text("Hello!")
                    .font(.title)

                
                Text("Hello!")
                    .font(.title3)
                
                HStack 
                    
                    Text("TEXT1")
                        .font(.title3)
                        .fontWeight(.bold)

                    Spacer()
                    
                    Text("TEXT2")
                        .font(.title3)
                        .fontWeight(.bold)

                

                Spacer()

                HStack 
                    
                    Text("Text1")
                        .font(.system(size: 90))
                    
                    Spacer()
                    
                    Text("Text2")
                        .font(.caption)

                
                
            
            .padding()
        
        .foregroundColor(Color.white)
        .animation(.easeIn)

    

【讨论】：

唯一的问题是如果我把你所有的代码都放在 Scrollview 里面，分隔符没有任何作用。

@user2398236：你不应该为倾斜而感到抱歉，我和你一起学习，ScrollView 有这种行为，它忽略了 Space，但它适用于 Text 和其他 Views。