CODEWITHSUNDEEP
iosswiftswiftui
ZaBlanc
ZaBlanc

Reputation: 4718

How does UIViewRepresentable size itself in relation to the UIKit control inside it?

I'm totally perplexed and unable find documentation on how to wrap a UIKit component and have it be sized correctly. Here's the simplest example, wrapping a UILabel:

public struct SwiftUIText: UIViewRepresentable {
    @Binding public var text: String

    public init(text: Binding<String>) {
        self._text = text
    }

    public func makeUIView(context: Context) -> UILabel {
        UILabel(frame: .zero)
    }

    public func updateUIView(_ textField: UILabel, context: Context) {
        textField.text = text
        textField.textColor = .white
        textField.backgroundColor = .black
    }
}

Nothing special, just a UILabel now ready for SwiftUI. I'll include it in a view:

    var body: some View {
        VStack {
            Text("Hello, World!!! \(text)")
                .font(.caption1Emphasized)

            SwiftUIText(text: $helperText)
        }
        .background(Color.green)
    }

The result is this screen. Notice how the Text at the top takes up just the size it needs, but SwiftUIText takes up all that vertical space. In other iterations of the code, I've seen it shrunken down and not taking up just a small amount of horizontal space.

Can someone explain how I can specify that my component should (A) use up all the width available to it and (B) only the height it needs?

enter image description here

Upvotes: 11

Views: 3269

Answers (1)

Asperi
Asperi

Reputation: 258117

Most simple and quick fix:

demo

        SwiftUIText(text: $helperText).fixedSize()

Update:

demo2

        SwiftUIText(text: $helperText)
            .fixedSize(horizontal: false, vertical: true)

Upvotes: 8

Related Questions