1

I'm having trouble customizing a TextField field, I would like to try to have a border equal to that of the first image for both:

  • Border color
  • Edge thickness dimension
  • Type of edge rounding

Can anyone give me advice?

Result I would like to achieve:

enter image description here

Result I get:

enter image description here

                    HStack(alignment: .center) {
                        Spacer()
                        TextField("Git Repository URL", text: $repoUrlStr)
                            .textFieldStyle(PlainTextFieldStyle())
                            .lineLimit(1)
                            .frame(width: 300)
                            .onAppear {
                                let url = "https://github.com/name/name"
                                if isValid(url: url) == true {
                                    print("ok", url)
                                }
                            }
                            Button {
                                if !repoUrlStr.isEmpty {
                                    self.repoUrlStr = ""
                                }
                            } label: {
                                Image(systemName: "xmark.circle.fill")
                                    .padding(.trailing, 2)
                                    .font(.system(size: 12))
                            }
                            .buttonStyle(PlainButtonStyle())
                            .opacity(repoUrlStr.isEmpty ? 0 : 1)
                        Spacer()
                    }
                    .padding([.top, .bottom], 4)
                    .border(Color.gray, width: 2)
                    .cornerRadius(3)
                    .padding(.bottom, 15)
Paul
  • 3,644
  • 9
  • 47
  • 113

1 Answers1

2

Try to use rounded rectangle in background (with needed parameters, like corner radius, color, etc) instead of border, like

.background(
    RoundedRectangle(cornerRadius: 8)
        .stroke(your_color_here)
)
Asperi
  • 228,894
  • 20
  • 464
  • 690
  • Perfect, it seems to work. P.s. What color do you think I tried with `.grey` but it's too dark. The input field is the one found when on xcode you press the clone project button. – Paul Mar 30 '22 at 11:27
  • If you have time, you might want to take a look at this question: https://stackoverflow.com/questions/71632388/macos-swift-ui-view-where-there-is-a-search-field-in-the-title-bar – Paul Mar 30 '22 at 15:37