概览 - OneScript

布局组件从 onescript/views 导入，用于排列、叠放和滚动子视图。

组件	用途
`VStack`	垂直排列子视图。
`HStack`	水平排列子视图。
`ZStack`	将子视图叠放在一起。
`LazyVStack`	按需布局纵向内容，并支持吸附分组。
`LazyHStack`	按需布局横向内容，并支持吸附分组。
`ScrollView`	让内容沿垂直、水平或两个方向滚动。
`Grid`	将子视图排列为二维网格。
`GridRow`	定义网格中的一行单元格。
`LazyVGrid / LazyHGrid`	使用 GridItem 描述按需布局网格。
`Section`	组织页眉、主体和页脚。
`List`	在可滚动列表中显示行。
`Form`	在可滚动表单中分组展示设置与控件。

所有布局组件也支持修饰符。

个人资料布局示例

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>

概览

个人资料布局示例

本页目录