SwiftUI Text View frame ignoring minWidth & idealWidth

Question

Created Jul ’22

Replies 1

Boosts 0

Views 2.5k

Participants 1

Trying to get a Text View to keep a minimum width for short strings... but it seems to ignore minWidth and idealWidth when any frame is stated. Taking the frame out of the picture, everything works as expected. Xcode 13.4.1, getting exact same result on Mac Catalyst, made for iPad, iPad and iPhone. Target is iOS 15.4 Am I just misunderstanding min/ideal/max ?

struct QuickTest: View {

	func viewSizeReader() -> some View {
		return GeometryReader { geometry -> Color in
			let rect = geometry.frame(in: .local); print(rect); return .clear }}

	var body: some View {
		VStack(spacing: 0) {
			HStack(spacing: 0) {

				Text("A very looooong string to test with")
					.frame(minWidth: 5, idealWidth: 5, maxWidth: 100, alignment: .leading)
					.lineLimit(1)
					.border(.red, width: 1)
					.background(viewSizeReader())

				Text("short")
					.frame(minWidth: 5, idealWidth: 5, maxWidth: 100, alignment: .leading)
					.lineLimit(1)
					.border(.red, width: 1)
					.background(viewSizeReader())

				Spacer()
			}
			Spacer()
		}
	}
}

Boost

Answer 1

tj4shee OP

Jul ’22

FYI... I know there is a way around it (using something similar to the viewSizeReader func and a ZStack)... but from my perspective it just doesn't work the way I perceive it should.

For anyone interested... This is a workaround

struct QuickTest: View {

	@State var textWidth = CGFloat.zero

	func viewSizeReader() -> some View {
		return GeometryReader { geometry -> Color in
			print(geometry.frame(in: .local)); return .clear }}

	func viewWidthReader(_ binding: Binding<CGFloat>) -> some View {
		return GeometryReader { geometry -> Color in
			let rect = geometry.frame(in: .local)
			DispatchQueue.main.async {
				binding.wrappedValue = rect.size.width
			}
			return .clear
		}
	}

	var body: some View {

		VStack(spacing: 0) {
			HStack(spacing: 0) {

				Text("A very looooong string to test with")
					.frame(minWidth: 5, idealWidth: 50, maxWidth: 100, alignment: .leading)
					.lineLimit(1)
					.border(.red, width: 1)
					.background(viewSizeReader())

				ZStack {
					Text("short")
						.fixedSize(horizontal: true, vertical: false)
						.foregroundColor(.clear)
						.lineLimit(1)
						.background(viewWidthReader($textWidth))
					Text("short")
						.frame(width: textWidth)
						.lineLimit(1)
						.border(.red, width: 1)
						.background(viewSizeReader())
				}

				Spacer()
			}
			Spacer()
		}
	}
}

0