SwiftUI 在 Zstack 中隐藏文本输入？

Posted 2023-02-24

【中文标题】SwiftUI 在 Zstack 中隐藏文本输入？

【英文标题】：SwiftUI Hide Text Input behind in Zstack?

【发布时间】：2021-12-28 17:13:53

【问题描述】：

所以我正在尝试为 SwiftUI 中的文本输入构建自定义外观。

我试图用一些不同的技巧来做到这一点，我想出的一个是使用标签，我打算在标签后面隐藏一个 TextInput，让它基本上像一个文本输入，而不是一个文本输入.

我什至不知道这是否可能。如果没有，我需要回到绘图板。

这就是我希望它看起来像空白的样子 黑色数字，具有自定义间距和字体等。

一旦开始输入数字，它们就会变成白色。

但是，正如您所见，textInput 是可见的。可以隐藏吗？

import SwiftUI

struct CustomInput: View 
    
    @State var id: String = " "
    @State var label1: Character = Character(" ")
    @State var label2: Character = Character(" ")
    @State var label3: Character = Character(" ")
    @State var label4: Character = Character(" ")
    @State var label5: Character = Character(" ")
    @State var label6: Character = Character(" ")
    @State var label7: Character = Character(" ")
    @State var label8: Character = Character(" ")
    @State var label9: Character = Character(" ")
    
   
    
    var body: some View 

        ZStack 
            Color.green
            HStack(spacing: 15)
                ForEach(0 ..< 9)  index in
                    Text(String(id[safe: index] ?? "0"))
                        .font(.custom("regular", size: 32))
                        .frame(height: 48)
                        .foregroundColor(id.count <= index ? .black : .white)
                
            
            .frame(width: 311, height: 48)
            
            TextField("", text: $id)
                .frame(width: 311, height: 48)
          
        
        .frame(width: 311, height: 48)

            
    
    


extension StringProtocol 
    subscript(safe offset: Int) -> Character? 
        guard 0 ..< count ~= offset else 
            return nil
        
        return self[index(startIndex, offsetBy: offset)]
    

【问题讨论】：

你能解释一下你的情况吗？例如，它总是一组数字吗？

是的，这是一个 9 位数字。

@Bnd10706 顺便说一句，你不再需要那些label*s

我尝试不使用标签，自定义字体和自定义间距使我无法使用一般的文本输入来实现结果。特别是因为我需要 0 一直存在。这只是我试图拉的一个把戏大声笑

@Bnd10706 我的意思是所有@State 属性，你没有使用它们

【参考方案1】：

这是一个可行的解决方案，供您继续使用。老实说，你最好的选择可能是使用UIViewRepresentable，但我会留给你。

注意：您需要在这里处理一些事情。它需要处理一些可能的错误。

如果您尝试使用非数字字符，则会出现错误。

禁用上下文菜单操作（复制、粘贴等）。我通过将重音设置为 .clear 来隐藏它

添加您的样式。

struct FirstView: View 
  @State var numbers = [0, 0, 0, 0, 0, 0, 0, 0, 0]
  @State var editedNumbers = ""

  var body: some View 
      ZStack 
          HStack 
              ForEach(0..<numbers.count)  index in
                  Text(String(numbers[index]))
                      .padding(.horizontal, 2)
                      .foregroundColor(numbers[index] != 0 ? .white : .black)
              
          
              .frame(width: UIScreen.main.bounds.width * 0.8)
              .padding(.vertical)
              .background(Color.green)


          TextField("", text: $editedNumbers)
              .frame(width: UIScreen.main.bounds.width * 0.8)
              .padding(.vertical)
              .foregroundColor(.clear)
              .accentColor(.clear)
              .onChange(of: editedNumbers, perform:  value in

              numbers = [0, 0, 0, 0, 0, 0, 0, 0, 0]

              for (index, char) in editedNumbers.enumerated() 
                  if index >= 0 && index <= 8 
                      numbers[index] = char.wholeNumberValue ?? 0
                  
              
          )
      
  

【讨论】：

效果明智，这基本上就是我要找的。它不允许删除，但谢谢你！我可以乱来看看我能不能找出错误

@Bnd10706 来自此解决方案的大多数错误/错误可以在 .onChange 修饰符中处理。我不知道你的要求是什么，所以我把它们排除在外了。

基本上这是一个 9 位的标签号，需要在此流程中输入。 UI 设计师想出了这个愚蠢的设计，它是每个人都喜欢的东西。它的愚蠢。谢谢，这是一个很好的起点。

实际上，您只需使用 .forgroundcolor 进行清除就解决了我的问题。我可以在我的原始代码中使用它

刚刚添加了一些修复程序以阻止崩溃以及在退格键上重置回 0。