SwiftUI中如何让ScrollView对齐到视图框架左侧?
问题描述
我正在制作一款类似Wordle的练习应用,想把VStack顶部的ScrollView(猜词列表)对齐到屏幕左侧。试过把它嵌套在设置了.leading对齐属性的VStack里,但没效果。想问有没有可用的对齐选项,还是必须用GeometryReader来解决?
import SwiftUI struct ContentView: View { @EnvironmentObject var word : Word var body: some View { ZStack { VStack { VStack(alignment: .leading) { ScrollView{ if word.guessedWords.count > 0 { ForEach(0..<word.guessedWords.count, id: \.self) { count in HStack { Text(word.guessedWords[count]) .foregroundColor(.white) .padding(.trailing, 10) Text("\(count)") .foregroundColor(.white) } } } } .padding(.top, 75) } Spacer() GuessedLetters() Keyboard() .padding(.bottom) } } .background(.black) .ignoresSafeArea() } } #Preview { ContentView() .environmentObject(Word()) }

解决方法
不需要用GeometryReader,问题核心是ScrollView默认会占满父视图宽度,外层VStack的leading对齐无法生效。以下两种方案都能解决:
方案1:让ScrollView自适应内容宽度
给ScrollView添加.fixedSize(horizontal: true, vertical: false),让它仅在垂直方向可滚动,水平方向根据内容自动收缩宽度,这样外层VStack的leading对齐就能起作用:
ScrollView{ // 原有内容保持不变 } .padding(.top, 75) .fixedSize(horizontal: true, vertical: false) // 新增该行代码
方案2:让ScrollView内的内容靠左对齐
如果需要ScrollView保持全屏宽度,只需在ScrollView内部的列表外层套一个VStack,设置其占满宽度并靠左对齐:
ScrollView{ VStack(alignment: .leading) { // 新增嵌套VStack if word.guessedWords.count > 0 { ForEach(0..<word.guessedWords.count, id: \.self) { count in HStack { Text(word.guessedWords[count]) .foregroundColor(.white) .padding(.trailing, 10) Text("\(count)") .foregroundColor(.white) } } } } .frame(maxWidth: .infinity, alignment: .leading) // 让容器占满宽度并靠左 } .padding(.top, 75)
两种方案都能实现列表靠左对齐的效果,可根据是否需要ScrollView全屏宽度来选择。
内容的提问来源于stack exchange,提问作者Bartender1382
相关产品推荐
相关产品推荐

