xcode 如何在SwiftUI视图中合并带空白下划线的TextField

lskq00tm  于 2023-06-24  发布在  Swift
关注(0)|答案(1)|浏览(97)

我在做一个填空题。我有一个问题突然冒出来我想看起来像
“这是一个问题,答案是__________,您将键入”
问题是我在页面底部有一个文本字段,供用户输入答案,然后按回车键。但是,我希望问题中的空白区域可以由用户在文本字段中输入的内容动态填充。我知道这可以通过一个简单的绑定到文本字段来完成,但我不知道如何使问题的下划线空白工作。
这是我目前所拥有的

struct dialogueCaptionBoxWithQuestion: View {

var questionPart1: String
var questionPart2: String
var correctChosen: Bool
var answer: String

@Binding var userInput: String
@Binding var currentQuestionNumber: Int

var body: some View{
    
    HStack {
        if !correctChosen {
            Text(questionPart1)
                .font(Font.custom("Chalkboard SE", size: 15)) +
            Text(userInput)
                .font(Font.custom("Chalkboard SE", size: 15))
                .foregroundColor(.black)
                .underline(color: .black.opacity(1.0)) +
            Text(questionPart2)
                .font(Font.custom("Chalkboard SE", size: 15))
        }else {
            Text(questionPart1)
                .font(Font.custom("Chalkboard SE", size: 15)) +
            
            Text("  " + answer + "  ")
                .font(Font.custom("Chalkboard SE", size: 15))
                .foregroundColor(.black)
                .underline(color: .black.opacity(1.0)) +
            Text(questionPart2)
                .font(Font.custom("Chalkboard SE", size: 15))
        }
    }.frame()
        .padding([.top, .bottom], 10)
        .padding([.leading, .trailing], 20)
        .foregroundColor(.black)
        .background(.white)
        .cornerRadius(10)
        .shadow(radius: 5)
    
}

}

cmssoen2

cmssoen21#

如果你想通过连接Text字段来实现,那么下划线可能是最好的选择。你实际上已经在使用这个了,所以你只需要添加填充来增加不完整答案的长度:

Text(userInput.padding(
        toLength: max(userInput.count, 15),
        withPad: " ",
        startingAt: 0
    ))
    .font(Font.custom("Chalkboard SE", size: 15))
    .foregroundColor(.black)
    .underline(color: .black.opacity(1.0)) +

但是,这不是一个很好的解决方案,因为您使用的是比例字体,因此文本字段的宽度总是随着用户输入答案而变化。
也许考虑不受这些问题影响的不同设计会更好。例如,您可以使用VStack,其中不完整的答案夹在questionPart1和questionPart2之间。这样,您可以按自己喜欢的方式设置样式,并应用固定宽度。
顺便说一句,没有必要将userInput作为Binding传递,因为它是一个只读视图。如果您希望能够向它写入更改,它只需要是一个Binding。此外,将字体应用于容器而不是应用于每个单独的文本字段会更简单。您对.frame()的使用也已被弃用,但这可能是因为您为了提供示例而删减了原始代码。

相关问题