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

Column

一个用于将子组件垂直放置的 Jetpack Compose Column 组件。

Android

GitHub

npm

更新日志

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

安装

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.

用法

Column 会垂直放置子元素。使用 verticalArrangement 和 horizontalAlignment 来控制间距和对齐方式。

ColumnExample.tsx

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

export default function ColumnExample() {
  return (
    <Host matchContents>
      <Column
        verticalArrangement={{ spacedBy: 8 }}
        horizontalAlignment="center"
        modifiers={[fillMaxWidth(), paddingAll(16)]}>
        <Text>第一个</Text>
        <Text>第二个</Text>
        <Text>第三个</Text>
      </Column>
    </Host>
  );
}

API

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

Component

`Column`

Android

Type: React.Element<ColumnProps>

ColumnProps

`children`

Android

Optional • Type: React.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