ListItem

用于显示结构化列表项的 Jetpack Compose ListItem 组件。

Android

Bundled version:

~55.0.2

一个列表项组件，遵循 Material Design 3 指南，用于具有标题、辅助文本以及前置/后置插槽的结构化列表条目。更多信息请参阅官方 Jetpack Compose 文档。

🌐 A list item component that follows Material Design 3 guidelines for structured list entries with headline, supporting text, and leading/trailing slots. See the official Jetpack Compose documentation for more information.

安装

🌐 Installation

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.

用法

🌐 Usage

基本列表项

🌐 Basic list item

BasicListItem.tsx

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

export default function BasicListItem() {
  return (
    <Host matchContents>
      <ListItem headline="Settings" />
    </Host>
  );
}

带支持文本和顶部标题

🌐 With supporting text and overline

使用 supportingText 属性添加副标题，使用 overlineText 为标题上方的类别标签。

🌐 Use the supportingText prop to add a secondary line and overlineText for a category label above the headline.

ListItemWithText.tsx

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

export default function ListItemWithText() {
  return (
    <Host matchContents>
      <ListItem
        overlineText="ACCOUNT"
        headline="Profile"
        supportingText="Manage your account settings and preferences"
      />
    </Host>
  );
}

带前导和尾随插槽

🌐 With leading and trailing slots

使用 ListItem.Leading 和 ListItem.Trailing 子组件在列表项的开始和结束处添加内容。

🌐 Use ListItem.Leading and ListItem.Trailing sub-components to add content to the start and end of the list item.

ListItemWithSlots.tsx

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

export default function ListItemWithSlots() {
  return (
    <Host matchContents>
      <ListItem headline="Notifications" supportingText="Manage notification preferences">
        <ListItem.Leading>
          <Icon source={require('./assets/notifications.xml')} contentDescription="Notifications" />
        </ListItem.Leading>
        <ListItem.Trailing>
          <Icon source={require('./assets/chevron_forward.xml')} contentDescription="Navigate" />
        </ListItem.Trailing>
      </ListItem>
    </Host>
  );
}

应用接口

🌐 API

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

Components

`ListItem`

Android

Type: React.Element<ListItemProps>

A list item component following Material 3 design guidelines.

ListItemProps

`children`

Android

Optional • Type: React.ReactNode

Children containing Leading and Trailing slots.

`color`

Android

Optional • Type: ColorValue

The background color of the list item.

`colors`

Android

Optional • Type: ListItemColors

Colors for list item's core elements.

`headline`

Android

Type: string

The main text content of the list item.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`onPress`

Android

Optional • Type: () => void

Callback that is called when the list item is pressed.

`overlineText`

Android

Optional • Type: string

Optional overline text displayed above the headline.

`supportingText`

Android

Optional • Type: string

Optional supporting text displayed below the headline.

`ListItemLeading`

Android

Type: React.Element<LeadingProps>

Leading content slot for ListItem.

`ListItemSupportingContent`

Android

Type: React.Element<SupportingContentProps>

Custom supporting content slot for ListItem. When provided, this takes precedence over the supportingText prop.

`ListItemTrailing`

Android

Type: React.Element<TrailingProps>

Trailing content slot for ListItem.

Types

`ListItemColors`

Android

Colors for list item's core elements.

Property	Type	Description
containerColor(optional)	`ColorValue`	-
headlineColor(optional)	`ColorValue`	-
leadingIconColor(optional)	`ColorValue`	-
overlineColor(optional)	`ColorValue`	-
supportingColor(optional)	`ColorValue`	-
trailingIconColor(optional)	`ColorValue`	-