FlowRow

一个用于水平换行子项的 Jetpack Compose FlowRow 组件。

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~56.0.26

Expo UI FlowRow 与官方 Jetpack Compose FlowRow API 一致，并以水平流式布局排列子元素，当空间不足时会换行到下一行。

安装

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.

用法

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