ZStack#

The ZStack component in the Scripting app allows you to arrange subviews on top of each other in a layered stack. It provides flexibility in aligning the layers along both the x- and y-axes using predefined alignment guides.

#ZStackProps

The ZStack component accepts the following props:

#Alignment

The Alignment type defines a set of common alignments for stacking views. These alignments combine horizontal and vertical guides. The diagram below illustrates these alignments:

#Supported Values:

#ZStack Component

The ZStack is a function component that arranges its children in a layered stack. Each child is placed relative to the alignment defined in the alignment property.

#Importing the Component

To use the ZStack component, ensure you import it from the Scripting app's scripting package:

import { ZStack } from 'scripting'

#Example Usage

#1. Basic Example

Align child views at the top:

<ZStack alignment="top">
  <Image systemName="globe" />
  <Text>
    Hello world.
  </Text>
</ZStack>

#2. Advanced Alignments

Use complex alignments such as bottomLeading to position child elements:

<ZStack alignment="bottomLeading">
  <Rectangle fill="gray" />
  <Text>
    Bottom Leading Text
  </Text>
</ZStack>

#3. Nested ZStack Example

Combine ZStack with other layout components for complex arrangements:

<ZStack alignment="center">
  <Rectangle fill="blue" />
  <ZStack alignment="topTrailing">
    <Image systemName="star" />
    <Text>
      Nested ZStack
    </Text>
  </ZStack>
</ZStack>

#Notes

• Performance Considerations: Avoid adding too many child views to the ZStack to prevent potential performance bottlenecks in complex layouts.
• Composable Layouts: Use ZStack alongside other components like VStack and HStack for flexible and dynamic UIs.