This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

LazyColumn

一个用于显示可滚动列表的 Jetpack Compose LazyColumn 组件。

Android

Included in Expo Go

GitHub

npm

更新日志

一个懒加载的垂直列表组件，它只渲染可见项，以实现高效滚动。有关更多信息，请参阅 Jetpack Compose 官方文档。

信息 LazyColumn 目前还不是真正的懒加载：原生端只会组合可见项，但 React 仍会一次性创建所有子项，因此大型列表在挂载时可能会很慢。我们正在改进这一点。对于大型列表，我们建议使用 FlashList 或 Legend List。

安装

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

基础懒加载列

BasicLazyColumn.tsx

import { Host, LazyColumn, ListItem, Text } from '@expo/ui/jetpack-compose';

const items = Array.from({ length: 100 }, (_, i) => `项目 ${i + 1}`);

export default function BasicLazyColumn() {
  return (
    <Host style={{ height: 400 }}>
      <LazyColumn>
        {items.map(item => (
          <ListItem key={item}>
            <ListItem.HeadlineContent>
              <Text>{item}</Text>
            </ListItem.HeadlineContent>
          </ListItem>
        ))}
      </LazyColumn>
    </Host>
  );
}

使用排列方式

使用 verticalArrangement 属性来控制列表中各项的间距。传入一个字符串值，例如 'spaceBetween'，或者传入一个对象，例如 { spacedBy: 8 }，以设置固定的 dp 间距。

LazyColumnArrangement.tsx

import { Host, LazyColumn, ListItem, Text } from '@expo/ui/jetpack-compose';

export default function LazyColumnArrangement() {
  return (
    <Host style={{ height: 400 }}>
      <LazyColumn verticalArrangement={{ spacedBy: 8 }} horizontalAlignment="center">
        <ListItem>
          <ListItem.HeadlineContent>
            <Text>间隔项 1</Text>
          </ListItem.HeadlineContent>
        </ListItem>
        <ListItem>
          <ListItem.HeadlineContent>
            <Text>间隔项 2</Text>
          </ListItem.HeadlineContent>
        </ListItem>
        <ListItem>
          <ListItem.HeadlineContent>
            <Text>间隔项 3</Text>
          </ListItem.HeadlineContent>
        </ListItem>
      </LazyColumn>
    </Host>
  );
}

使用内容内边距

使用 contentPadding 属性为列表内容周围添加 dp 内边距。

LazyColumnPadding.tsx

import { Host, LazyColumn, ListItem } from '@expo/ui/jetpack-compose';

export default function LazyColumnPadding() {
  return (
    <Host style={{ height: 400 }}>
      <LazyColumn contentPadding={{ start: 16, top: 8, end: 16, bottom: 8 }}>
        <ListItem>
          <ListItem.HeadlineContent>带内边距的项 1</ListItem.HeadlineContent>
        </ListItem>
        <ListItem>
          <ListItem.HeadlineContent>带内边距的项 2</ListItem.HeadlineContent>
        </ListItem>
        <ListItem>
          <ListItem.HeadlineContent>带内边距的项 3</ListItem.HeadlineContent>
        </ListItem>
      </LazyColumn>
    </Host>
  );
}

API

import { LazyColumn } from '@expo/ui/jetpack-compose';

Component

`LazyColumn`

Android

Type: React.Element<LazyColumnProps>

A lazy column component that efficiently displays a vertically scrolling list.

LazyColumnProps

`children`

Android

Optional • Type: ReactNode

The content to display inside the lazy column.

`contentPadding`

Android

Optional • Type: ContentPadding

Content padding in dp.

`horizontalAlignment`

Android

Optional • Literal type: string

The horizontal alignment of items.

Acceptable values are: 'center' | 'start' | 'end'

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`verticalArrangement`

Android

Optional • Literal type: union

The vertical arrangement of items. Can be a preset string or an object with spacedBy to specify spacing in dp.

Acceptable values are: 'center' | 'top' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly' | 'bottom' | { spacedBy: number }

Types

`ContentPadding`

Android

Content padding values for LazyColumn.

Property	Type	Description
bottom(optional)	`number`	Bottom padding in dp.
end(optional)	`number`	End padding in dp.
start(optional)	`number`	Start padding in dp.
top(optional)	`number`	Top padding in dp.