跳到主要内容

Column flex竖向

这是用于快速竖向布局的组件

示例​

import { Header, ScrollView, TopView, GroupList, Column, Text } from '@/duxuiExample'

const list = [1, 2, 3]

const Child = () => {

  return list.map(item => <Column key={item} className='p-3 bg-white r-2'>
    <Text>内容{item}</Text>
  </Column>)
}

export default function ColumnExample() {
  return <TopView>
    <Header title='Column' />
    <ScrollView>
      <GroupList>
        <GroupList.Item title='默认竖向'>
          <Column className='gap-2'>
            <Child />
          </Column>
        </GroupList.Item>
        <GroupList.Item title='内容居中'>
          <Column items='center' className='gap-2'>
            <Child />
          </Column>
        </GroupList.Item>
        <GroupList.Item title='内容开始'>
          <Column items='start' className='gap-2'>
            <Child />
          </Column>
        </GroupList.Item>
        <GroupList.Item title='内容结束'>
          <Column items='end' className='gap-2'>
            <Child />
          </Column>
        </GroupList.Item>
      </GroupList>
    </ScrollView>
  </TopView>
}

Props​

继承自Taro的View Props

在RN端不完全继承

items​

对 align-items 的封装

类型必填默认值
enum('start', 'end', 'center', 'baseline', 'stretch')否stretch

justify​

对 justify-content 的封装

类型必填默认值
enum('start', 'end', 'center', 'between', 'around')否start

grow​

设置为true相当于 flex: 1

类型必填默认值
boolean否false

shrink​

设置为true相当于 flex-shrink: 0

类型必填默认值
boolean否false

self​

对 align-self 的封装

类型必填默认值
enum('start', 'end', 'center', 'baseline', 'stretch')否