列

用于垂直放置子项的 Jetpack Compose Column 组件。

Android

Included in Expo Go

Recommended version:

~57.0.22

信息有关跨平台使用，请参阅通用 Column —— 它会根据平台呈现相应的原生组件。

Expo UI 列与官方 Jetpack Compose Column API 相匹配，并以可配置的排列和对齐方式垂直放置子元素。

🌐 Expo UI Column matches the official Jetpack Compose Column API and places children vertically with configurable arrangement and alignment.

Three colored boxes stacked vertically inside a Column

安装

🌐 Installation

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.

用法

🌐 Usage

Column 将儿童垂直排列。使用 verticalArrangement 和 horizontalAlignment 来控制间距和对齐。

ColumnExample.tsx

import {
  Host,
  Column,
  Text,
  useMaterialColors,
} from '@expo/ui/jetpack-compose';
import {
  fillMaxWidth,
  paddingAll,
} from '@expo/ui/jetpack-compose/modifiers';

export default function ColumnExample() {
  const colors = useMaterialColors();

  return (
    <Host style={{ flex: 1 }}>
      <Column
        verticalArrangement={{ spacedBy: 8 }}
        horizontalAlignment="center"
        modifiers={[fillMaxWidth(), paddingAll(16)]}>
        <Text style={{ fontSize: 28 }} color={colors.onBackground}>
          First
        </Text>
        <Text style={{ fontSize: 28 }} color={colors.onBackground}>
          Second
        </Text>
        <Text style={{ fontSize: 28 }} color={colors.onBackground}>
          Third
        </Text>
      </Column>
    </Host>
  );
}

应用接口

🌐 API

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

Component

`Column`

Android

Type: React.Element<ColumnProps>

ColumnProps

`children`

Android

Optional • Type: ReactNode

`horizontalAlignment`

Android

Optional • Type: HorizontalAlignment

Horizontal alignment of children.

`horizontalArrangement`

Android

Optional • Type: HorizontalArrangement

Horizontal arrangement of children.

`verticalAlignment`

Android

Optional • Type: VerticalAlignment

Vertical alignment of children.

`verticalArrangement`

Android

Optional • Type: VerticalArrangement

Vertical arrangement of children.

Inherited props

PrimitiveBaseProps