时间戳

首页 > 解决方案 > 如何使用 SwiftUI 将 Stacks 固定在顶部和底部

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

问题描述

你好吗 ？

我需要将第一个 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

        }

标签： swiftui

解决方案

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

我们也不能像你用的那样使用 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)

    }
}

推荐阅读