shaffex

GeometryReader is a container view that provides access to the size and position of its child views. It allows you to read the geometry of the view hierarchy and use that information to adjust the layout dynamically.

<body>
    <geometryreader proxy="geoProxy">
        <zstack>
            <hstack spacing="0">
                <rectangle foregroundColor="red" width=""/>
                <rectangle foregroundColor="yellow" width=""/>
                <rectangle foregroundColor="red" width=""/>
                <rectangle foregroundColor="yellow" width=""/>
                <rectangle foregroundColor="red" width=""/>
                <rectangle foregroundColor="yellow" width=""/>
                <rectangle foregroundColor="red" width=""/>
            </hstack>
            <text font="largeTitle" background="blue">$geoProxy.width x $geoProxy.height</text>
        </zstack>
    </geometryreader>
</body>

Screenshot

<body>
    <geometryreader proxy="geoProxy">
        <zstack maxWidth="infinity" maxHeight="infinity">
            <circle foregroundColor="red" width=""/>
            <circle foregroundColor="green" width=""/>
            <circle foregroundColor="blue" width=""/>
            <vstack alignment="bottomLeading">
                <text foregroundColor="red" background="secondary">Red is 80%</text>
                <text foregroundColor="green" background="secondary">Green is 60%</text>
                <text foregroundColor="blue" background="secondary">Blue is 40%</text>
            </vstack>
        </zstack>
    </geometryreader>
</body>

Screenshot