NaEasy UI

Appearance

Flex 布局 ​

介绍 ​

Flex 组件是对基础 View 进行封装的组件，分为 FlexCol 与 FlexRow，用于快速布局使用。Flex 布局可以帮助开发者更轻松地构建复杂的界面布局，支持各种对齐方式、边距设置、背景色等属性。

导入 ​

js
import FlexView from '@/components/layout/FlexView.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';

用法 ​

基础用法 ​

FlexCol 是一个 flex 垂直方向的 view，FlexRow 是一个 flex 水平方向的 view。二者都基于 FlexView 组件，继承了其所有属性和方法。

vue
<template>
  <!-- 垂直布局 -->
  <FlexCol class="container">
    <view class="box h box1" />
    <view class="box h box2" />
    <view class="box h box3" />
  </FlexCol>
  
  <!-- 水平布局 -->
  <FlexRow class="container horizontal">
    <view class="box w1 box1" />
    <view class="box w1 box2" />
    <view class="box w1 box3" />
  </FlexRow>
</template>

<style scoped>
.box {
  border-radius: 20rpx;
  margin: 10rpx;
  flex-shrink: 0;
}
.w1 {
  flex: 1;
}
.h {
  height: 60rpx;
}
.box1 {
  background-color: #198daa;
}
.box2 {
  background-color: #1b7599;
}
.box3 {
  background-color: #3d7bd8;
}
.container {
  border: 1px dashed #888;
}
.container.horizontal {
  height: 150rpx;
}
</style>

居中 ​

设置 center 属性可以使内容在主轴和交叉轴上都居中。

vue
<template>
  <FlexRow class="container horizontal" center>
    <Text>我是居中内容</Text>
  </FlexRow>
</template>

换行 ​

设置 wrap 属性可以使内容换行。

vue
<template>
  <FlexRow class="container" wrap>
    <view class="box w h box1" />
    <view class="box w h box2" />
    <view class="box w h box3" />
    <view class="box w h box1" />
    <view class="box w h box2" />
    <view class="box w h box3" />
    <!-- 更多元素 -->
  </FlexRow>
</template>

<style scoped>
.box {
  border-radius: 20rpx;
  margin: 10rpx;
  flex-shrink: 0;
}
.w {
  width: 60rpx;
}
.h {
  height: 60rpx;
}
/* 其他样式同基础用法 */
</style>

常用属性封装 ​

支持背景颜色、大小、边距等常用属性的快速设置。

vue
<template>
  <FlexCol>
    <!-- 设置大小 -->
    <FlexCol :width="180" :height="180" backgroundColor="#1b7599" innerClass="container">
      <Text color="white">设置大小 180X180</Text>
    </FlexCol>
    
    <!-- 设置背景颜色 -->
    <FlexCol backgroundColor="#3d7bd8" :height="60" innerClass="container">
      <Text color="white">设置背景颜色 #3d7bd8</Text>
    </FlexCol>
    
    <!-- 设置内边距 -->
    <FlexCol :padding="20" backgroundColor="#1b7599" innerClass="container">
      <Text color="white">内边距20</Text>
    </FlexCol>
    
    <!-- 设置外边距 -->
    <FlexCol :margin="20" :height="60" backgroundColor="#3d7bd8" innerClass="container">
      <Text color="white">外边距20</Text>
    </FlexCol>
  </FlexCol>
</template>

点击事件封装 ​

支持点击的 View，通过 touchable 属性启用。

vue
<template>
  <FlexCol 
    backgroundColor="#f40"
    touchable
    :padding="10"
    @click="handleClick"
  >
    <Text>请点击我</Text>
  </FlexCol>
</template>

<script setup lang="ts">
function handleClick() {
  console.log('点击了容器');
}
</script>

对齐方式 ​

可以通过 justify 和 align 属性设置子元素的对齐方式。

vue
<template>
  <!-- 两端对齐 -->
  <FlexRow justify="space-between" align="center" :padding="10" backgroundColor="#f0f0f0">
    <Text>左侧</Text>
    <Text>右侧</Text>
  </FlexRow>
  
  <!-- 居中对齐 -->
  <FlexRow justify="center" align="center" :padding="10" backgroundColor="#f0f0f0">
    <Text>居中内容</Text>
  </FlexRow>
  
  <!-- 平均分布 -->
  <FlexRow justify="space-around" :padding="10" backgroundColor="#f0f0f0">
    <Text>项目1</Text>
    <Text>项目2</Text>
    <Text>项目3</Text>
  </FlexRow>
</template>

间距设置 ​

通过 gap 属性设置子元素之间的间距。

vue
<template>
  <FlexRow :gap="20" wrap :padding="10" backgroundColor="#f0f0f0">
    <view class="box w h box1" />
    <view class="box w h box2" />
    <view class="box w h box3" />
  </FlexRow>
</template>

组合使用案例 ​

这是一个简单的使用案例，展示了如何使用 Flex View 快速布局。

vue
<template>
  <FlexRow justify="space-between" align="center">
    <FlexRow align="center">
      <Avatar background="primary" text="王" />
      <FlexCol :padding="20">
        <FlexRow align="center">
          <Icon icon="favorite-filling" color="#f60" />
          <Width :size="4"/>
          <Text :fontSize="32">小王</Text>
        </FlexRow>
        <Text>1234567890@qq.com</Text>
      </FlexCol>
    </FlexRow>
    <Button type="text" size="small" @click="showToast">详情</Button>
  </FlexRow>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Toast from '@/components/feedback/Toast.vue';
import Avatar from '@/components/display/Avatar.vue';
import Button from '@/components/basic/Button.vue';
import Icon from '@/components/basic/Icon.vue';
import Width from '@/components/layout/space/Width.vue';

const toast = ref();
function showToast() {
  (toast.value as any).info('点击详情');
}
</script>

API 参考 ​

FlexCol / FlexRow > FlexView ​

Flex 布局组件，分为垂直方向的 FlexCol 和水平方向的 FlexRow。

Props ​

名称说明类型必填默认值
id组件IDstring--
position盒子定位"absolute" 丨 "relative"--
direction弹性盒子方向"row"丨"column"丨'row-reverse'丨'column-reverse'-"column" (FlexCol), "row" (FlexRow)
justify子元素在主轴上的对齐方式'flex-start'丨'flex-end'丨'center'丨'space-between'丨'space-around'丨'space-evenly'--
align子元素在交叉轴上的对齐方式"stretch"丨'center'丨'start'丨'end'丨'flex-start'丨'flex-end'丨'center'--
alignSelf当前元素在主轴上的对齐方式"stretch"丨'center'丨'start'丨'end'丨'flex-start'丨'flex-end'丨'center'丨"auto"--
center主轴与交叉轴是否居中boolean-false
wrap弹性布局是否换行boolean-false
innerStyle特殊样式object--
innerClass特殊类名string丨string[]丨object--
flexflex 参数number丨string--
flexBasisflexBasis 参数number丨string--
flexGrowflexGrow 参数number--
flexShrinkflexShrink 参数number--
padding内边距参数（支持数字或数组）number丨Array<number>丨ThemePaddingMargin--
margin外边距参数（支持数字或数组）number丨Array<number>丨ThemePaddingMargin--
top顶部位置number丨string--
right右侧位置number丨string--
bottom底部位置number丨string--
left左侧位置number丨string--
radius圆角number丨string--
gap子元素间距number丨string--
touchable是否可以点击boolean-false
backgroundColor背景颜色string-''
pressedColor按下时的颜色string--
activeOpacity按下时的透明度（仅在 pressedColor 未设置时有效）number-0.7
width宽度number丨string--
height高度number丨string--
overflow内容溢出处理'visible'丨'hidden'丨'scroll'丨'auto'--

Slots ​

名称说明
default默认插槽，用于放置子元素

Events ​

名称说明参数
click点击事件$event
state状态变化事件（default、active、pressed）StateType

主题变量 ​

名称类型默认值说明
FlexActiveOpacitynumber0.7按下时的透明度
FlexBackgroundColorstring''默认背景颜色