TextField .alignmentGuide in Form leading point varies?

Question

Created Feb ’25

Replies 1

Boosts 0

Participants 1

I have a Form with a custom TextField which uses a custom Text(). When I use .alignmentGuide on the Text() it seems the origin reference point varies with the length of, but not by the length of, the TextField label String. This is a problem when in a Form. My workaround has been to not use a TextField label but enclose the each TextField in a LabeledContent and then I can set the width of the label and align off of that.

How does Form cause TextField to set it's width and why if using .alignmentGuide on Text() does the TextField label length even matter?

Boost

Answer 1

pikes OP

4w

Originally I just passed a label to the actual TextField but could not get the desired effect. This is the solution I'm using but I find it unsatisfactory. I wrap each form item in LabeledContent. It does not look as tidy as the Form label formatting but without it when I use .alignmentGuide it operates from a unique origin which depends on the label but simply adjusting for the label length does not give consistent results.

Form {
  LabeledContent {
    CustomField(
      thing: $activeThing,
      setValue: { thingtype, newValue in thingtype.thing = newValue }
    )
  } label: {
    Text(shortLabel)
      .frame(width: longLabelWidth, alignment: .trailing)
  }
		CustomField(
	          thing: $activeThing,
	          setValue: { thingtype, newValue in thingtype.thing = newValue }
	        )
	} label: {
		Text(longLabel)
          	  .frame(width: longLabelWidth, alignment: .trailing)
	}
}

struct CustomField: View {
  ...
  var body: some View {
    TextField("", text: $displayText)
      .inlineCompletion(
        text: displayText,
        completion: completion,
      )
      .onAppear {displayText = getValue(transaction)}

struct InlineCompletion: ViewModifier {
  let text: String
  let completion: String
  
  func body(content: Content) -> some View {
    ZStack(alignment: .leading) {
      content
      
      if !completion.isEmpty {
        Text(completion)
          .foregroundColor(.secondary)
          .opacity(text.isEmpty ? 0 : 0.7)
          .alignmentGuide(.leading) { _ in
            -textWidth(text) - baseFontSize
          }
      }
    }
  }
}

extension View {
  func inlineCompletion(text: String, completion: String) -> some View {
    modifier(
      InlineCompletion(
        text: text,
        completion: completion
      )
    )
  }
}

0