Overview

Import layout components from onescript/views to arrange, layer, and scroll child views.

Component	Purpose
`VStack`	Arranges children vertically.
`HStack`	Arranges children horizontally.
`ZStack`	Layers children on top of each other.
`LazyVStack`	Lazily lays out vertical content with pinned sections.
`LazyHStack`	Lazily lays out horizontal content with pinned sections.
`ScrollView`	Scrolls content vertically, horizontally, or in both directions.
`Grid`	Arranges children in a two-dimensional grid.
`GridRow`	Defines a row of cells in a grid.
`LazyVGrid / LazyHGrid`	Lazily lays out a grid described by GridItem values.
`Section`	Organizes a header, body, and footer.
`List`	Displays rows in a scrollable list.
`Form`	Groups settings and controls in a scrollable form.

Every layout component also accepts Modifiers.

Profile layout example

import {
  Color, Font, FontWeight, HStack, Image, Modifier, Shape, Text, VStack,
} from "onescript/views"

const avatarURL = new URL(profile.avatar)

<HStack
  alignment="center"
  spacing={12}
  modifier={Modifier.padding(16)}
>
  <Image
    url={avatarURL}
    resizable
    modifier={Modifier
      .scaledToFill()
      .frame({ width: 64, height: 64 })
      .clipShape(Shape.circle)}
  />
  <VStack
    alignment="leading"
    spacing={4}
  >
    <Text modifier={Modifier
      .font(Font.headline)
      .fontWeight(FontWeight.bold)}>
      {profile.nickname}
    </Text>
    <Text modifier={Modifier.foregroundStyle(Color.secondary)}>@{profile.id}</Text>
    <HStack spacing={12}>
      <Text>{profile.followers} followers</Text>
      <Text>{profile.following} following</Text>
    </HStack>
  </VStack>
</HStack>

Profile layout example

On this page