List

List 将子视图排列为行，自身即可滚动。子视图中的 Section 会成为带页眉和页脚的分组。

import { List, Modifier, Section, Text } from "onescript/views"

<List modifier={Modifier.listStyle("insetGrouped")}>
  <Section header="水果">
    <Text>苹果</Text>
    <Text>橙子</Text>
  </Section>
</List>

选择

用 tag 标记每一行，并同时传入 selection 与 onSelectionChange。

单选：selection 是一个 tag 值，未选中时为 null。点击行即可选中。
多选：selection 是 tag 值数组。iOS 上只有进入编辑模式后才能勾选，需要配合 EditButton。传给 onSelectionChange 的数组顺序不固定。

import { EditButton, List, Modifier, Text, ToolbarItem, useState } from "onescript/views"

function Inbox() {
  const [selected, setSelected] = useState<string[]>([])
  return (
    <List
      selection={selected}
      onSelectionChange={setSelected}
      modifier={Modifier.toolbar(<ToolbarItem placement="primaryAction"><EditButton /></ToolbarItem>)}
    >
      <Text modifier={Modifier.tag("welcome")}>欢迎</Text>
      <Text modifier={Modifier.tag("invoice")}>账单</Text>
    </List>
  )
}

Prop	Type	说明
`selection`	`string \| number \| null` 或数组	选中的 tag；多选时为 tag 数组。
`onSelectionChange`	`(value) => void`	用户改变选择时执行，必须与 `selection` 同时提供。

List 自带滚动，不要放进 ScrollView。使用 listStyle 调整外观。也支持修饰符。仅在 App 和 Action 视图会话中可用；在 Widget 中使用会报「不支持的视图类型」错误。

选择

本页目录