滚动视图 SwiftUI

Posted 2023-02-24

【中文标题】滚动视图 SwiftUI

【英文标题】：ScrollView SwiftUI

【发布时间】：2019-10-06 07:30:12

【问题描述】：

我正在开发一个带有 swift ui 的应用程序。这是一个单一的视图应用程序。但我的滚动视图有问题

我试图删除滚动视图，但它没有改变任何东西。我总是把这个白色的大问题放在我的视野中。

https://imgur.com/a/BiWy0fe

import SwiftUI

struct Redactor 
    var id: Int
    let name, imageURL, since, bio: String


struct Article 
    var id: Int
    let name, image, content, redactor: String



struct MainScreenView: View 

    let redactors:[Redactor] = [...]

    let articles:[Article] = [...]

    var body: some View 

        NavigationView 
            ScrollView(.vertical, showsIndicators: true) 
                VStack(alignment: .leading) 
                ScrollView(.horizontal, showsIndicators: false) 
                        HStack(alignment: .top, spacing: 20) 
                            ForEach(redactors, id: \.id)  Redactor in
                                NavigationLink(destination: MainRedactorView(redactor: Redactor)) 
                                    RedactorView(redactor: Redactor)

                                
                            
                        .padding(.leading, 15)
                .padding(.top, 10)

                VStack(alignment: .leading) 
                    Text("Les Dernières nouvelles :")
                        .font(.title)
                        .fontWeight(.bold)
                        .padding(.leading, 15)
                        .padding(.top, 20)

                    ForEach(articles, id: \.id)  Article in
                        ArticleView(article: Article)
                    
                
                
            
            .navigationBarTitle(Text("The News Place"))
                


        
    


struct RedactorView: View 

    let redactor : Redactor

    var body : some View 
            VStack 
                Image(redactor.imageURL)
                    .resizable()
                    .frame(width: 150, height: 150)
                    .aspectRatio(contentMode: .fill)
                    .cornerRadius(75)
                Text(redactor.name)
                    .font(.subheadline)
                    .fontWeight(.bold)
        
        
    

struct ArticleView: View 
    var article: Article

    var body: some View 
        VStack (alignment: .leading) 
            Image(article.image)
                .renderingMode(.original)
                .resizable()
                .cornerRadius(10)
                .aspectRatio(contentMode: .fit)

                Text(article.name)
                    .font(.title)
                    .fontWeight(.bold)
                Text("Le Rondeau Mag'")
                    .font(.subheadline)
                    .foregroundColor(.red)
                Text(article.content)
                    .font(.body)
                    .lineLimit(5)
                    .foregroundColor(.secondary)

        .padding()
    

我想删除滚动视图顶部的这个白色空白。谢谢

【参考方案1】：

是在顶部创建空白区域的 NavigationView。 试试

.navigationBarTitle(Text("The News Place"), displayMode: .inline)

看看空白是否消失。

【参考方案2】：

您是否尝试过删除 ScrollView 中的 VStack？ ScrollView 已经定义了一个隐式堆栈。

了解哪个元素导致空白的好方法是将 .border(Color.red) 应用于不同的视图。

希望这会有所帮助。