Grid

Grid 使用所有子视图共同计算行高和列宽，适合需要精确对齐的二维布局。

import {
  Divider, Grid, GridRow, Modifier, Text,
} from "onescript/views"

<Grid
  alignment="leading"
  horizontalSpacing={12}
  verticalSpacing={8}
>
  <GridRow>
    <Text modifier={Modifier.gridColumnAlignment("trailing")}>名称</Text>
    <Text>OneScript</Text>
  </GridRow>
  <Divider modifier={Modifier.gridCellUnsizedAxes("horizontal")} />
  <GridRow>
    <Text>平台</Text>
    <Text>iOS</Text>
  </GridRow>
</Grid>

直接放在 Grid 下的视图会占据整行。每个 GridRow 的直接子视图对应一个单元格。

Prop	Type	说明
`alignment`	`Alignment`	单元格默认对齐方式，默认 `"center"`。
`horizontalSpacing`	`number`	单元格水平间距（pt）；省略时使用系统间距。
`verticalSpacing`	`number`	单元格垂直间距（pt）；省略时使用系统间距。
`children`	视图或视图数组	网格行以及占据整行的直接子视图。

GridRow

GridRow 定义 Grid 中的一行。它的每个直接子视图按照列顺序占据一个网格单元格。

Prop	Type	说明
`alignment`	`"top"` \| `"center"` \| `"bottom"`	当前行的垂直对齐；省略时继承 Grid 的垂直对齐。
`children`	视图或视图数组	按照列顺序排列的单元格。

Grid 专用修饰符

以下修饰符在被修饰的视图参与 Grid 布局时生效。

gridCellColumns

gridCellColumns(count) 指定当前视图在 GridRow 中占据的列数。count 必须是正整数。

import { Grid, GridRow, Modifier, Text } from "onescript/views"

<Grid>
  <GridRow>
    <Text modifier={Modifier.gridCellColumns(2)}>横跨两列</Text>
  </GridRow>
</Grid>

gridCellAnchor

gridCellAnchor(anchor) 使用 UnitPoint 设置当前单元格的对齐锚点。

import { Grid, GridRow, Modifier, Text, UnitPoint } from "onescript/views"

<Grid>
  <GridRow>
    <Text modifier={Modifier.gridCellAnchor(UnitPoint.bottomTrailing)}>内容</Text>
  </GridRow>
</Grid>

gridCellUnsizedAxes

gridCellUnsizedAxes(axes) 阻止 Grid 在指定轴上向当前视图提供额外尺寸。axes 支持 "horizontal"、"vertical" 和 "all"。

import { Divider, Grid, GridRow, Modifier, Text } from "onescript/views"

<Grid>
  <GridRow><Text>A</Text><Text>B</Text></GridRow>
  <Divider modifier={Modifier.gridCellUnsizedAxes("horizontal")} />
</Grid>

gridColumnAlignment

gridColumnAlignment(alignment) 设置当前单元格所在列的水平对齐。每一列只需在一个单元格上声明该修饰符。

import { Grid, GridRow, Modifier, Text } from "onescript/views"

<Grid>
  <GridRow>
    <Text modifier={Modifier.gridColumnAlignment("trailing")}>名称</Text>
    <Text>OneScript</Text>
  </GridRow>
</Grid>