当键盘处于视图中时 SwiftUI 文本字段填充

发布于 2025-01-14 09:34:44 字数 2873 浏览 4 评论 0原文

我有一个滚动视图,其中只有文本字段。我希望能够点击任何文本字段并让键盘将其稍微向上推。

struct DetailView: View {
    @EnvironmentObject var vm: ViewModel

    var body: some View {
        ScrollView {
            VStack {
                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                Group {
                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)
                }
            }
        }
    }
}

当文本字段中没有填充/样式时,这非常有效。如果我使用带有样式(边框、填充)的自定义文本字段,键盘将悬停在文本字段的一部分上。这是我的自定义文本字段:

struct NotesField: View {
    @Binding var value: String

    init(_ value: Binding<String>) {
        self._value = value
    }

    var body: some View {
        TextField("Enter stuff", text: $value)
        .padding()
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke(Color.gray, lineWidth: 1)
        )
    }
}

众所周知,ios14 会自动为您处理此问题,因此我想要一个解决方案,无需使用视图修饰符来监听键盘何时打开或不打开。

I have a Scrollview with just textfields in it. I want to be able to tap on any textfield and have the keyboard push it up slightly.

struct DetailView: View {
    @EnvironmentObject var vm: ViewModel

    var body: some View {
        ScrollView {
            VStack {
                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                TextField("Enter stuff", text: $vm.username)
                    .padding(.bottom, 20)

                Group {
                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)

                    TextField("Enter stuff", text: $vm.username)
                        .padding(.bottom, 20)
                }
            }
        }
    }
}

This works perfectly when there's no padding/styling in the textfield. If I use a custom textfield with styling (borders, padding), the keyboard hovers over part of the textfield. This is my custom textfield:

struct NotesField: View {
    @Binding var value: String

    init(_ value: Binding<String>) {
        self._value = value
    }

    var body: some View {
        TextField("Enter stuff", text: $value)
        .padding()
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke(Color.gray, lineWidth: 1)
        )
    }
}

It's well known that ios14 handles this for you automatically so I want a solution where I don't have to use a view modifier to listen to when the keyboard is opened or not.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

请持续率性 2025-01-21 09:34:44

如果您使用带有滚动视图的 iOS 14+ 或可以选择使用滚动视图。

https://developer.apple.com/documentation/swiftui/scrollviewproxy https://developer.apple.com/documentation/swiftui/scrollviewreader

下面可能会帮助

    ScrollViewReader { (proxy: ScrollViewProxy) in
        ScrollView {
            view1().frame(height: 200)
            view2().frame(height: 200)

            view3() <-----this has textfields 
                .onTapGesture {
                    proxy.scrollTo(1, anchor: .center)
                }
                .id(1)

            view4() <-----this has text editor
                .onTapGesture {
                    proxy.scrollTo(2, anchor: .center)
                }
                .id(2)

            view5().frame(height: 200)
            view6().frame(height: 200)
            submtButton().frame(height: 200)
        }
    }

上面的 imp 部分

     anyView().onTapGesture {
          proxy.scrollTo(_ID, anchor: .center)
     }.id(_ID)

希望这对某人有帮助:)

If you are using iOS 14+ with scrollview or have the option to use scrollview.

https://developer.apple.com/documentation/swiftui/scrollviewproxy https://developer.apple.com/documentation/swiftui/scrollviewreader

Below might help

    ScrollViewReader { (proxy: ScrollViewProxy) in
        ScrollView {
            view1().frame(height: 200)
            view2().frame(height: 200)

            view3() <-----this has textfields 
                .onTapGesture {
                    proxy.scrollTo(1, anchor: .center)
                }
                .id(1)

            view4() <-----this has text editor
                .onTapGesture {
                    proxy.scrollTo(2, anchor: .center)
                }
                .id(2)

            view5().frame(height: 200)
            view6().frame(height: 200)
            submtButton().frame(height: 200)
        }
    }

imp part from above is

     anyView().onTapGesture {
          proxy.scrollTo(_ID, anchor: .center)
     }.id(_ID)

Hope this helps someone :)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文