A modern programming language that makes developers happier.

kotlinlang

image.png

I put together a GroupBox with label. The astute pixel peerer would notice that I'm doing this by simply putting a Text there and setting its .background() to surface. So I'm basically coloring over the border. Is there a cleaner way to do this? The only other way I can think of is to construct and draw the (border) path, chopping out a chunk of the top line, which will have to be done dynamically in regards to the text width. I was surprised that M3 doesn't have such a component (LabeledGroupBox or something). They show them in the specs for FullDialog on the M3 docs, but I couldn't find any component that was such.

You could have your text background draw with blend mode Clear, and put your border + text in a graphics layer with compositing mode Offscreen. That would clear the space for the text without being drawing a specific color as the text background, but with a more expensive graphics layer. 

(I think the compositing mode would need to be offscreen - but maybe just alpha? I forget…)

I believe offscreen was added as a more-obvious way to do what &lt;1f alpha achieved

The Material `OutlinedTextField` does something really similar, it should be possible to find how that works