减小HStack SwiftUI的宽度

Question

我正试图制作一个聊天应用程序，但在HStack上遇到了困难。我的边框在视图的边缘，所以没有显示完整的圆角矩形。

​

​

TextField和HStack的代码是这样的。

var body: some View {
        HStack {
            CustomTextField(placeholder: Text("Enter your message"), text: $message)

            Button {
                messagesManager.sendMessage(message: message)
                message = ""
            } label: {
                Image(systemName: "arrow.up.circle.fill")
                    .foregroundColor(.blue)
                    .padding(10)
                    .scaledToFit()
            }
        }
        .padding(.horizontal)
        .padding(.vertical, 0)
        .border(.gray)
        .cornerRadius(20)
}

struct CustomTextField: View {
    var placeholder: Text
    @Binding var text: String
    var editingChanged: (Bool) -> () = {_ in}
    var commit: () -> () = {}
    
    var body: some View {
        ZStack(alignment: .leading) {
            if text.isEmpty {
                placeholder
                    .opacity(0.5)
            }
            TextField("", text: $text, onEditingChanged: editingChanged, onCommit: commit)
        }
    }
}

我无法找到如何减少HStack的长度，以便整个圆角矩形将显示，以及增加按钮的大小，以填补更多的空间内的形状。

Answer 1

您可以将overlay与RoundedRectangle一起用于拐角半径的边框。我在您的CustomTextField中添加了前导填充，这样在添加overlay之后，它将看起来更合适，并且水平填充到您的HStack中。

var body: some View {
    HStack {
        CustomTextField(placeholder: Text("Enter your message"), text: $message)
            .padding(.leading, 10)
        
        
        Button {
            //messagesManager.sendMessage(message: message)
            message = ""
        } label: {
            Image(systemName: "arrow.up.circle.fill")
                .foregroundColor(.blue)
                .padding(10)
                .scaledToFit()
        }
    }
    .overlay(
        RoundedRectangle(cornerRadius: 20)
            .stroke(.gray)
    )
    .padding(.horizontal)
}

预览