-1

I am designing an app for watch os using swift ui. I want to implement a UI somewhat similar like this

enter image description here

Both the textfield and the number pad on the same screen. But when we implement the inbuilt textfield, it navigates us to a separate screen where we can select the options like number pad, gesture writing etc. and then based on the selection a separate screen appears to add the user input (imagine the selected option as the numberpad) and then the value entered is binded to the textfield I originally created. So what I want to achieve is to restrict the user to only use the number pad and both the number pad and the textfield should sit in the same screen as in the sample UI I have attached above. Is this possible to handle with the inbuilt textfield component or should I rewrite the logic to implement the UI and the user interaction? Thanks in advance.

SVG
  • 809
  • 6
  • 21
  • 1
    You will need to create your own UI using a label and buttons – Paulw11 Aug 29 '21 at 05:13
  • Ohh thanks @Paulw11. Doesn't the textfield have any properties we can adjust to appear on the same screen? – SVG Aug 29 '21 at 05:18
  • If you don't need to use system input methods, you don't need to use a text field. Just change the text by clicking the buttons and display it with `Text`. The only thing is, I'm not sure how many buttons would be comfortable to press on a small device. – Phil Dukhov Aug 29 '21 at 06:01

1 Answers1

1
struct ContentView: View {
@State var text = ""
var body: some View {
    VStack {
        Text(text)
        LazyVGrid(columns: [GridItem(.fixed(50)), GridItem(.fixed(50)), GridItem(.fixed(50))], alignment: .center, spacing: nil, pinnedViews: [], content: {
            ForEach(1..<10) { item in
                Button(action: {
                    text.append("\(item)")
                    print(text)
                }, label: {
                    ZStack {
                        Rectangle()
                            .foregroundColor(.gray)
                        Text("\(item)")
                            .font(.headline)
                    }
                })
                
                
                    
                    
            }
        })
    }
    
}

}

app in use

WilliamD47
  • 129
  • 6