SwiftUI TextEditor Divider 不会根据文本行数更改 Y 位置？

Question

我正在尝试制作一个带有分隔符的 SwiftUI TextEditor，该分隔符调整其位置以保持在应用程序的 edit-bio 部分内最底部的文本行下方。

注意：我的 TextEditor 上有一个框架，因此它不会占据整个屏幕

现在，分隔线是静态的，并停留在一个地方。是否有一种内置方法可以使分隔符保持在最底部的文本行下方？

我认为 Spacer 会给我这种行为？

谢谢！

struct EditBio: View {
    @ObservedObject var editProfileVM: EditProfileViewModel
    
    var body: some View {
        VStack(spacing: 10) {
            TextEditor(text: $editProfileVM.bio)
                .foregroundColor(.white)
                .padding(.top, 70)
                .padding([.leading, .trailing], 50)
                .frame(minWidth: 100, idealWidth: 200, maxWidth: 400, maxHeight: 200, alignment: .center)
            Divider().frame(height: 1).background(.white)
            Spacer()
        }
    }
}

Answer 1

它完全按照您的指示去做。但是 TextEditor 上的背景颜色。您会看到它的高度为 200 + 距离 VStack.

的间距为 10

我更改了您的代码以使其显而易见：

struct EditBio: View {
    @State var editProfileVM = ""
    
    var body: some View {
        VStack(spacing: 10) {
            TextEditor(text: $editProfileVM)
                .foregroundColor(.white)
                .padding(.top, 70)
                .padding([.leading, .trailing], 50)
                .frame(minWidth: 100, idealWidth: 200, maxWidth: 400, maxHeight: 200, alignment: .center)
                .background(Color.gray)
            Divider().frame(height: 1).background(.red)
            Spacer()
        }
    }
}

制作这个：

可以看到TextEditor自然希望身高超过200，但那是限制了它。因此，Spacer() 不会导致 TextEditor 变小。

设置固定框架会导致的另一个问题是您的文本有时会超出屏幕。我假设您真正想要的是一个不大于其内容的自我调整 TextEditor。

只需使用以下代码即可完成：

struct EditBio: View {
    @State var editProfileVM = ""
    var body: some View {
        VStack(spacing: 10) {
            SelfSizingTextEditor(text: $editProfileVM)
             // Frame removed for the image below.
            // .frame(minWidth: 100, idealWidth: 200, maxWidth: 400, maxHeight: 200, alignment: .center)
                .foregroundColor(.white)
                // made the .top padding to be .vertical
                .padding(.vertical, 70)
                .padding([.leading, .trailing], 50)
                .background(Color.gray)
            Divider().frame(height: 5).background(.red)
            Spacer()
        }
    }
}

struct SelfSizingTextEditor: View {
    
    @Binding var text: String
    @State var textEditorSize = CGSize.zero

    var body: some View {
        ZStack {
            Text(text)
                .foregroundColor(.clear)
                .copySize(to: $textEditorSize)
            TextEditor(text: $text)
                .frame(height: textEditorSize.height)
        }
    }
}

extension View {
    func readSize(onChange: @escaping (CGSize) -> Void) -> some View {
        background(
            GeometryReader { geometryProxy in
                Color.clear
                    .preference(key: SizePreferenceKey.self, value: geometryProxy.size)
            }
        )
            .onPreferenceChange(SizePreferenceKey.self, perform: onChange)
    }

    func copySize(to binding: Binding<CGSize>) -> some View {
        self.readSize { size in
            binding.wrappedValue = size
        }
    }
}

生成此视图：

SwiftUI TextEditor Divider 不会根据文本行数更改 Y 位置？

SwiftUI TextEditor Divider doesn't change Y position based on text-line count?

ios

swift

swiftui