FlowRow

一个 Jetpack Compose FlowRow 组件，用于在水平方向上换行排列子项。

Android

GitHub

npm

更新日志

Bundled version:

~55.0.0-beta.0

Expo UI FlowRow 与官方 Jetpack Compose FlowRow 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.

用法

FlowRow 以水平流布局排列子元素，在空间不足时自动换行到下一行。

FlowRowExample.tsx

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

export default function FlowRowExample() {
  const tags = ['React Native', 'Expo', 'Android', 'Jetpack Compose', 'Material 3', 'Kotlin'];

  return (
    <Host matchContents>
      <FlowRow
        horizontalArrangement={{ spacedBy: 8 }}
        verticalArrangement={{ spacedBy: 8 }}
        modifiers={[paddingAll(16)]}>
        {tags.map(tag => (
          <Text key={tag}>{tag}</Text>
        ))}
      </FlowRow>
    </Host>
  );
}

API

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

Component

`FlowRow`

Android

Type: React.Element<FlowRowProps>

FlowRowProps

`children`

Android

Optional • Type: React.ReactNode

`horizontalArrangement`

Android

Optional • Type: HorizontalArrangement

Horizontal arrangement of children.

`verticalArrangement`

Android

Optional • Type: VerticalArrangement

Vertical arrangement of children.

Inherited Props

PrimitiveBaseProps