如何在SwiftUI中动态创建一个包含文本和文本字段混合的视图?

huangapple go评论167阅读模式
英文:

How can I create a view with a mixture of Text and TextFields dynamically in SwiftUI

问题

以下是您要翻译的内容:

问题出在我需要能够在SwiftUI中创建一个视图,它看起来像一句文本,但其中有一些空白,用户可以输入自己的文本。我还需要一种方法来捕获绑定中输入的文本,但不确定如何在循环中进行多个绑定。

我尝试了一些选项,最接近的是使用LazyGrid,但由于间距问题,它看起来不像普通的句子。

struct MultiText: View {
    @State var text = "There was once a {-} that only had {-} in it. How did they get in? {-}"

    @State var answerText: String = "XXXXXXX"

    let rows = [
        GridItem(.adaptive(minimum: 80))
    ]

    var body: some View {
        LazyVGrid(columns: rows, spacing: 0, alignment: .leading) {
            ForEach(text.components(separatedBy: " "), id: \.self) { component in
                if component == "{-}" {
                    TextField("", text: $answerText
                    )
                } else {
                    Text(component)
                }
            }
        }
    }
}

这会产生以下结果

点击此处查看图像描述

任何帮助都将不胜感激。

英文:

The issue I am encountering is, I need to be able to create a view in SwiftUI that looks like a sentence of text but has blanks where the user can enter their own text. I also need a way to be able to capture the entered text from the binding, but not sure how to do multiple bindings in a loop.

Ive tried a few options and the closest I have got is using LazyGrid, but it doesn't look like a normal sentence due to spacing?

struct MultiText: View {
    @State var text = "There was once a {-} that only had {-} in it. How did they get in? {-}"

    @State var answerText: String = "XXXXXXX"

    let rows = [
        GridItem(.adaptive(minimum: 80))
    ]

    var body: some View {
        LazyVGrid(columns: rows, spacing: 0, alignment: .leading) {
            ForEach(text.components(separatedBy: " "), id: \.self) { component in
                if component == "{-}" {
                    TextField("", text: $answerText
                    )
                } else {
                    Text(component)
                }
            }
        }
    }
}

This produces the following result

enter image description here

Any help appreciated

答案1

得分: 0

在ForEach中使用适当的id,这样可以帮助:

import SwiftUI

struct Item: Identifiable {
    var id = UUID()
    var value: String
}

struct MultiText: View {
    @State var text = "There was once a {-} that only had {-} in it. How did they get in? {-}"

    @State var answerText: String = "XXXXXXX"

    let rows = [
        GridItem(.adaptive(minimum: 80))
    ]

    var body: some View {
        LazyVGrid(columns: rows, alignment: .leading, spacing: 0) {
            ForEach(text.components(separatedBy: " ").map { Item(value: $0) }, id: \.id) { component in
                if component.value == "{-}" {
                    TextField("", text: $answerText)
                } else {
                    Text(component.value)
                }
            }
        }
    }
}

这样你就可以在ForEach中使用多个TextField。

我认为这也可能有所帮助:

类似的问题

英文:

I think can help use appropriate id's in ForEach:

    import SwiftUI
    
    struct Item: Identifiable {
        var id = UUID()
        var value: String
    }
    
    struct MultiText: View {
        @State var text = "There was once a {-} that only had {-} in it. How did they get in? {-}"
    
        @State var answerText: String = "XXXXXXX"
    
        let rows = [
            GridItem(.adaptive(minimum: 80))
        ]
    
        var body: some View {
            LazyVGrid(columns: rows, alignment: .leading, spacing: 0) {
                ForEach(text.components(separatedBy: " ").map{Item(value: $0)}, id: \.id) { component in
                    if component.value == "{-}" {
                        TextField("", text: $answerText
                        )
                    } else {
                        Text(component.value)
                    }
                }
            }
        }

}

In this way you have multiple TextField.

I think also this can help:

similar

huangapple
  • 本文由 发表于 2023年7月27日 22:45:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/76780916.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定