LazyColumn
用于显示可滚动列表的 Jetpack Compose LazyColumn 组件。
一个懒加载的垂直列表组件，只渲染可见的项目以实现高效滚动。更多信息请参见官方 Jetpack Compose 文档。
🌐 A lazily-loaded vertical list component that only renders visible items for efficient scrolling. See the official Jetpack Compose documentation for more information.
安装
🌐 Installation
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
用法
🌐 Usage
基础懒列
🌐 Basic lazy column
import { Host, LazyColumn, ListItem } 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} headline={item} /> ))} </LazyColumn> </Host> ); }
有安排
🌐 With arrangement
使用 verticalArrangement 属性来控制列表中项目的间距。传入字符串值如 'spaceBetween' 或对象如 { spacedBy: 8 } 来设置固定的 dp 间距。
🌐 Use the verticalArrangement prop to control how items are spaced within the list. Pass a string value like 'spaceBetween' or an object like { spacedBy: 8 } for fixed spacing in dp.
import { Host, LazyColumn, ListItem } from '@expo/ui/jetpack-compose'; export default function LazyColumnArrangement() { return ( <Host style={{ height: 400 }}> <LazyColumn verticalArrangement={{ spacedBy: 8 }} horizontalAlignment="center"> <ListItem headline="Spaced item 1" /> <ListItem headline="Spaced item 2" /> <ListItem headline="Spaced item 3" /> </LazyColumn> </Host> ); }
带内容填充
🌐 With content padding
使用 contentPadding 属性在列表内容周围添加以 dp 为单位的内边距。
🌐 Use the contentPadding prop to add padding around the list content in dp.
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 headline="Padded item 1" /> <ListItem headline="Padded item 2" /> <ListItem headline="Padded item 3" /> </LazyColumn> </Host> ); }
应用接口
🌐 API
import { LazyColumn } from '@expo/ui/jetpack-compose';
Component
Type: React.Element<LazyColumnProps>
A lazy column component that efficiently displays a vertically scrolling list.
stringThe horizontal alignment of items.
Acceptable values are: 'start' | 'end' | 'center'