# compose

Travis Griggs

09/27/2023, 11:20 PM
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.

Zach Klippenstein (he/him) [MOD]

09/27/2023, 11:40 PM
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…)


09/28/2023, 12:01 AM
I believe offscreen was added as a more-obvious way to do what <1f alpha achieved

Alex Vanyo

09/28/2023, 12:08 AM
The Material
does something really similar, it should be possible to find how that works