TextEditor 在 SwiftUI 中坚持 minHeight [英] TextEditor sticking to minHeight inSwiftUI

问题描述

我正在尝试使用新引入的 TextEditor 构建视图.这个想法是我在顶部(蓝框)有一些内容，然后是带有 TextEditor 的 ScrollView 和下面的可变数量的 Text它(红框).

I am trying to build a view with the newly introduced TextEditor. The idea is that I have some content at the top (blue frame), then a ScrollView with a TextEditor and a variable number of Text below it (red frame).

TextEditor(黄框)视图应该具有最小高度，但如果后面没有太多 Text 视图，则应占用所有可用空间– 它目前没有这样做......

The TextEditor(yellow frame) view is supposed to have a minimum height, but should take up all the available space if there aren't to many Text views following – which it currently does not do...

import SwiftUI

struct ScrollViewWithTextEditor: View {
    
    var comments = ["Foo", "Bar", "Buzz"]
    
    var loremIpsum = """
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    """
    
    var body: some View {
        VStack {
            Group {
                Text("Some Content above")
            }
            .frame(maxWidth: .infinity)
            .border(Color.blue, width: 3.0)
            .padding(.all, 10)

            ScrollView {
                ScrollView {
                    TextEditor(text: .constant(loremIpsum))
                        .frame(minHeight: 200.0)
                }
                .frame(minHeight: 200.0)
                .border(Color.yellow, width: 3.0)
                .cornerRadius(3.0)
                .padding(.all, 10.0)
                
                VStack {
                    ForEach(comments, id: \.self) { comment in
                        Text(comment)
                    }
                    .padding(.all, 10)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .border(Color.gray, width: 1)
                    .cornerRadius(3.0)
                    .padding(.all, 10)
                }
                
            }
            .frame(minHeight: 200.0)
            .border(Color.red, width: 3)
            .padding(.all, 3)
        }
    }
}

struct ScrollViewWithTextEditor_Previews: PreviewProvider {
    static var previews: some View {
        ScrollViewWithTextEditor()
    }
}

有关如何解决此问题的任何建议?

Any suggestions on how to solve this?

推荐答案

这里是可能的解决方案.使用 Xcode 12/iOS 14 进行测试.

Here is possible solution. Tested with Xcode 12 / iOS 14.

ScrollView {
    // make clear static text in background to define size and
    // have TextEditor in front with same text fit
    Text(loremIpsum).foregroundColor(.clear).padding(8)
    .frame(maxWidth: .infinity)
    .overlay(
        TextEditor(text: .constant(loremIpsum))
    )
}
.frame(minHeight: 200.0)
.border(Color.yellow, width: 3.0)

这篇关于TextEditor 在 SwiftUI 中坚持 minHeight的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！