LazyColumn

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

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.18

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

LazyColumn 目前还不是真正的延迟加载：原生端仅组合可见项，但 React 仍会预先创建所有子项，因此大型列表的挂载速度可能较慢。我们正在努力改进这一点。对于大型列表，我们推荐使用 FlashList 或 Legend List。

安装

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun 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) => `Item ${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,
  Text,
} 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>
            <Text>Padded item 1</Text>
          </ListItem.HeadlineContent>
        </ListItem>
        <ListItem>
          <ListItem.HeadlineContent>
            <Text>Padded item 2</Text>
          </ListItem.HeadlineContent>
        </ListItem>
        <ListItem>
          <ListItem.HeadlineContent>
            <Text>Padded item 3</Text>
          </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: 'start' | 'end' | 'center'

`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' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly' | 'top' | '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.