如何使用像 Duolingo 应用程序这样的 Swift UI 制作一些水平线来放置所选项目?

问题描述 投票:0回答:1

我有关于 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)

enter image description here enter image description here

ios swift swiftui mobile
1个回答
0
投票

添加线条的一种方法是将它们添加到用于行的

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)
}

Screenshot

© www.soinside.com 2019 - 2024. All rights reserved.