減少HStackSwiftUI的寬度-有解無憂

我正在嘗試制作一個聊天應用程式，但在使用 HStack 時遇到了困難。我擁有的邊框越過了視圖的邊緣，因此不顯示完整的圓角矩形。

減少 HStack SwiftUI 的寬度

我為 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 的長度，以便顯示整個圓角矩形，以及增加按鈕的大小以填充形狀內的更多空間。

uj5u.com熱心網友回復：

您可以將overlaywithRoundedRectangle用于具有圓角半徑的邊框。我已經為您添加了前導填充，CustomTextField以便HStack在添加overlay.

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)
}

預習

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/511925.html

標籤：IOS迅速迅捷

上一篇：WhenselectcelltopassdataalwaysshowsnilinthenextViewControllerusingSwift

下一篇：Swift測驗應用程式如何進行下一個問題？