You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Swift问题:无法将电影列表水平对齐至屏幕顶部

解决Swift中水平滚动电影列表与导航标题对齐问题

问题根源在于HStack的内边距导致列表缩进,加上导航栏默认显示模式让标题和内容的对齐基准不一致。以下是具体修复方案:

方案1:调整内边距并统一对齐基准

修改MovieListView代码

移除HStack上的.padding(.horizontal),将内边距移到ScrollView层级(可根据视觉需求调整边距数值):

var body: some View {
    ScrollView(.horizontal) {
        HStack(spacing: 10) {
            ForEach(movies) { movie in
                NavigationLink(destination: MovieDetailsView(movie: movie)) {
                    if let url = URL(string: "https://image.tmdb.org/t/p/w500\(movie.posterPath)") {
                        AsyncImage(url: url) { image in
                            image
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                        } placeholder: {
                            Color.gray
                        }
                        .frame(width: 100, height: 150)
                    } else {
                        Text("No movies available")
                    }
                }
            }
        }
        // 移除此处的.padding(.horizontal)
    }
    .padding(.horizontal, 16) // 给滚动视图整体添加水平边距(可选)
    .onAppear {
        fetchData()
    }
}

修改ContentView代码

添加.navigationBarTitleDisplayMode(.inline),让导航标题以内联模式显示,确保和内容的对齐基准统一:

struct ContentView: View {
    var body: some View {
        NavigationView {
            MoviesManager.MovieListView()
                .navigationTitle("Movies")
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

方案2:保留边距并强制对齐

如果需要保留HStack的内边距,同时让列表左边缘严格对齐标题,可给HStack添加对齐指南:

HStack(spacing: 10) {
    // 原有内容
}
.padding(.horizontal)
.alignmentGuide(.leading) { _ in 0 }

这个设置会强制HStack的左对齐线与父视图左边缘完全重合,抵消默认布局偏移。


内容的提问来源于stack exchange,提问作者Gonçalo Ramos

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.21 03:10:28