我有关于 Swift UI 的问题。我正在实现用户学习新单词的功能,方法是按照正确的顺序放置句子中的每个单词,如下图所示。
现在,点击的单词将被很好地移动并放置在框中,这很好。
但是,我觉得如果有一些水平线而不是大框,并且那些选定的单词将像 Duolingo 一样放在这些线上,看起来会更好。这是代码,如果您能帮助我实现该更改,那就太好了。
提前谢谢您。
ScrollView{
VStack(alignment: .leading){
ForEach(0..<(arrangedWords.count + itemsPerRow - 1) / itemsPerRow, id: \.self) { row in
HStack(spacing: 8) {
ForEach(0..<itemsPerRow, id: \.self) { word in
let index = row * itemsPerRow + word
if index < arrangedWords.count {
let targetWord = arrangedWords[index]
Text(targetWord)
.foregroundColor(.white)
.padding()
.background(Rectangle().fill(Color.green.opacity(0.8)))
.cornerRadius(10)
.animation(.spring(), value: arrangedWords)
.onTapGesture {
moveWordOutOfSpace(index: index)
print("arranged words: \(arrangedWords)")
}
}
}
}
}
}
.frame(maxWidth: .infinity, alignment: .leading)
.frame(minHeight: 100)
.padding(10)
}
.background(.white)
.cornerRadius(10)
.overlay {
RoundedRectangle(cornerRadius: 10)
.stroke(Color.gray, lineWidth: 5)
}
.padding(.horizontal,10)
添加线条的一种方法是将它们添加到用于行的
HStack
的背景中。
一条线可以绘制为具有(非常小的)固定高度的
Rectangle
。
添加背景时使用
alignment: .bottom
。
如果您希望线条拉伸有界区域的整个宽度,请也向
.frame
添加 HStack
修饰符,即 alignment: .leading
。
HStack(spacing: 8) {
ForEach(0..<itemsPerRow, id: \.self) { word in
// ...
}
}
.frame(maxWidth: .infinity, alignment: .leading)
.background(alignment: .bottom) {
Rectangle()
.fill(.blue)
.frame(height: 2)
}