SwiftUI TextField 在 ZStack 内的 VStack 中被禁用(使用 TextField 模拟警报) [英] SwiftUI TextField acts disabled in VStack inside ZStack (simulating an Alert with a TextField)

问题描述

我需要在 SwiftUI 中制作一个警报，其中有一个可编辑的 TextField.目前，SwiftUI 不支持此功能(从 Xcode 11.3 开始)，因此我正在寻找解决方法.

I need to make an Alert in SwiftUI that has an editable TextField in it. Currently, this isn't supported by SwiftUI (as of Xcode 11.3), so I'm looking for a work-around.

我知道我可以通过将普通 UIKit 位封装在 UIHostingController 中来实现，但我真的想坚持使用全 SwiftUI 实现.

I know I can implement by wrapping the normal UIKit bits in a UIHostingController, but really want to stick with an all-SwiftUI implementation.

我在 ZStack 中有两个 VStack，前面的一个(带有 TextView 的那个)被隐藏和禁用，直到您点击按钮.看看这个:

I've got two VStacks in a ZStack, with the front one (the one with the TextView) being hidden and disabled until until you tap the button. Take a look at this:

import SwiftUI

struct ContentView: View {
    @State var isShowingEditField = false
    @State var text: String = "12345"

    var body: some View {
        ZStack {
            VStack {
                Text("Value is \(self.text)")
                Button(action: {
                    print("button")
                    self.isShowingEditField = true
                }) {
                    Text("Tap To Test")
                }
            }
            .disabled(self.isShowingEditField)
            .opacity(self.isShowingEditField ? 0.25 : 1.00)

            VStack(alignment: .center) {
                Text("Edit the text")
                TextField("", text: self.$text)
                    .multilineTextAlignment(.center)
                    .lineLimit(1)

                Divider()
                HStack {
                    Button(action: {
                        withAnimation {
                            self.isShowingEditField = false
                            print("completed... value is \(self.text)")
                        }
                    }) {
                        Text("OK")
                    }
                }
            }
            .padding()
            .background(Color.white)
            .shadow(radius: CGFloat(1.0))
            .disabled(!self.isShowingEditField)
            .opacity(self.isShowingEditField ? 1.0 : 0.0)
        }
    }
}

这似乎对我有用.在两个 VStack 之间切换效果很好，但 TextField 不可编辑.

This seems like it should work to me. Switching between the two VStacks works well, but the TextField is not editable.

它就像被禁用一样，但事实并非如此.明确地 .disabled(false) 到 TextField 没有帮助.此外，无论如何它应该已经启用，因为 1) 这是默认设置，2) 它所在的 VStack 专门设置为启用，以及 3) 确定按钮正常工作.

It acts like it's disabled, but it's not. Explicitly .disabled(false) to the TextField doesn't help. Also, it should already be enabled anyway since 1) that's the default, 2) the VStack it's in is specifically being set as enabled, and 3) The OK button works normally.

想法/解决方法?
谢谢！

Ideas/workarounds?
Thanks!

推荐答案

您需要使用某些方法强制更新 TextField.像下面这样:

You need to force the TextField updating with some methods. Like the following:

    TextField("", text: self.$text)
                .multilineTextAlignment(.center)
                .lineLimit(1)
                .id(self.isShowingEditField)

这篇关于SwiftUI TextField 在 ZStack 内的 VStack 中被禁用(使用 TextField 模拟警报)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！