SwiftUI 中的 TextEditor 定位答案

【问题标题】：TextEditor positioning in SwiftUISwiftUI 中的 TextEditor 定位
【发布时间】：2020-12-27 01:00:59
【问题描述】：

我添加了一个文本编辑器，但无法将其位置居中，如图所示，文本编辑器已向右移动。抱歉，我刚刚注意到整个页面都向右移动了。我不知道我做错了什么。你可以解决这个问题。我希望它站在中间。

struct TextSend: View {
    
    @State private var inputText = ""
    
    var body: some View {
        GeometryReader { geometry in
            VStack {
                HStack {
                    Text("Picture")
                        .font(.system(size: 60))
                        .frame(width: geometry.size.width, height: geometry.size.height / 10)
                        .foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
                    Spacer().frame(height: geometry.size.height / 5)
                }

                VStack {
                    Text("Hi").frame(width: geometry.size.width, height: geometry.size.height / 10)
                }
                
                
                HStack {
                    ForEach(0 ..< 3) { _ in
                        CircleView()
                            .frame(width: geometry.size.width / 5, height: geometry.size.height / 10)
                            .shadow(radius: 10)
                    }
                }
                VStack {
                    
                TextEditor(text: $inputText) .frame(width: geometry.size.width, height:geometry.size.height / 3) .overlay(RoundedRectangle(cornerRadius: 30).stroke(Color.init( red: 45/255, green: 0/255, blue: 112/255), lineWidth: 1)).lineSpacing(10)
                    .autocapitalization(.words)
                    .disableAutocorrection(true)
                    .padding()
                }
                Spacer().frame(height: geometry.size.height / 15)
                VStack {
                    Button(action: {}, label: {
                        Text("Gönder")
                            .frame(width: geometry.size.width / 3, height: 50)
                            .padding(10)
                            .font(Font.system(size: 30, weight: .medium, design: .serif))
                            .foregroundColor(.white)
                            .background(RoundedRectangle(cornerRadius: 30))
                            .foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))

                    })
                }
            }
        }
    }
}

【问题讨论】：

标签： ios swift swiftui text-editor

【解决方案1】：

从所有使用的地方删除frame(width: geometry.size.width，因为这样的硬编码会破坏布局。尝试将geometry 始终仅用于可计算的值。

这里是固定部分（用 Xcode 12.1 / iOS 14.1 测试）

    HStack {
        Text("Picture")
            .font(.system(size: 60))
            .frame(height: geometry.size.height / 10)    // << !!
            .foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
        Spacer().frame(height: geometry.size.height / 5)
    }

    VStack {
        Text("Hi").frame(height: geometry.size.height / 10)   // << !!
    }
    
    
    // ... other code

    VStack {
        
    TextEditor(text: $inputText)
       .frame(height:geometry.size.height / 3)      // << !!
       .overlay(RoundedRectangle(cornerRadius: 30).stroke(Color.init( red: 45/255, green: 0/255, blue: 112/255), lineWidth: 1)).lineSpacing(10)
        .autocapitalization(.words)
        .disableAutocorrection(true)
        .padding()
    }

【讨论】：

如何在文本编辑器中设置内部间距@Asperi

【解决方案2】：

您需要将frame 添加到GeometryReader 中的第一个孩子，在您的情况下为VStack

VStack{
}.frame(width:geometry.size.width , height: geometry.size.height)

ps：你可以做到：例如geometry.size.width - 10，用于填充目的

【讨论】：