Layout 布局

约 944 字大约 3 分钟

2025-10-31

通过基础的 12 分栏，迅速简便地创建布局

基本使用

通过col组件的span设置需要分栏的比例

<template>
    <un-row custom-style="margin-bottom: 10px">
        <un-col span="6">
            <view class="demo-layout bg-purple-light"></view>
        </un-col>
        <un-col span="6">
            <view class="demo-layout bg-purple"></view>
        </un-col>
    </un-row>
    <un-row custom-style="margin-bottom: 10px">
        <un-col span="4">
            <view class="demo-layout bg-purple"></view>
        </un-col>
        <un-col span="4">
            <view class="demo-layout bg-purple-light"></view>
        </un-col>
        <un-col span="4">
            <view class="demo-layout bg-purple-dark"></view>
        </un-col>
    </un-row>
    <un-row justify="space-between">
        <un-col span="3">
            <view class="demo-layout bg-purple"></view>
        </un-col>
        <un-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </un-col>
        <un-col span="3">
            <view class="demo-layout bg-purple"></view>
        </un-col>
        <un-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </un-col>
    </un-row>
</template>

<style lang="scss">
    .demo-layout {
        height: 25px;
        border-radius: 4px;
        width: 100%;
    }

    .bg-purple {
        background: #ced7e1;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
</style>

分栏间隔

通过设置row组件的gutter参数，来指定每一栏之间的间隔(最终表现为左边内边距各为gutter/2)，默认间隔为0

<template>
    <un-row justify="space-between" gutter="10">
        <un-col span="3">
            <view class="demo-layout bg-purple"></view>
        </un-col>
        <un-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </un-col>
        <un-col span="3">
            <view class="demo-layout bg-purple"></view>
        </un-col>
        <un-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </un-col>
    </un-row>
</template>

<style lang="scss">
    .demo-layout {
        height: 25px;
        border-radius: 4px;
        width: 100%;
    }

    .bg-purple {
        background: #ced7e1;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
</style>

混合布局

通过指定col组件的span属性，指定不同的值，达到不同的比例

<template>
    <un-row justify="space-between" gutter="10">
        <un-col span="2">
            <view class="demo-layout bg-purple-light"></view>
        </un-col>
        <un-col span="4">
            <view class="demo-layout bg-purple"></view>
        </un-col>
        <un-col span="6">
            <view class="demo-layout bg-purple-dark"></view>
        </un-col>
    </un-row>
</template>

<style lang="scss">
    .demo-layout {
        height: 25px;
        border-radius: 4px;
        width: 100%;
    }

    .bg-purple {
        background: #ced7e1;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
</style>

分栏偏移

通过指定col组件的offset属性可以指定分栏偏移的栏数。

<template>
    <un-row justify="space-between" custom-style="margin-bottom: 10px">
        <un-col span="3" offset="3">
            <view class="demo-layout bg-purple-light"></view>
        </un-col>
        <un-col span="3" offset="3">
            <view class="demo-layout bg-purple"></view>
        </un-col>
    </un-row>
    <un-row>
        <un-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </un-col>
        <un-col span="3" offset="3">
            <view class="demo-layout bg-purple"></view>
        </un-col>
    </un-row>
</template>
<style lang="scss">
    .demo-layout {
        height: 25px;
        border-radius: 4px;
        width: 100%;
    }

    .bg-purple {
        background: #ced7e1;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
</style>

对齐方式

<template>
    <un-row justify="space-between" custom-style="margin-bottom: 10px">
        <un-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </un-col>
        <un-col span="3">
            <view class="demo-layout bg-purple"></view>
        </un-col>
    </un-row>
    <un-row>
        <un-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </un-col>
        <un-col span="3">
            <view class="demo-layout bg-purple"></view>
        </un-col>
    </un-row>
</template>

<style lang="scss">
    .demo-layout {
        height: 25px;
        border-radius: 4px;
        width: 100%;
    }

    .bg-purple {
        background: #ced7e1;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
</style>

API

Row Props

参数	说明	类型	默认值
gutter	栅格间隔，左右各为此值的一半，单位任意	String \| Number	0
justify	水平排列方式	Enum	start
align	垂直排列方式	Enum	center
wrap	排列时是否换行	Boolean	false
customStyle	自定义样式	Object \| String	-

Col Props

参数	说明	类型	默认值
span	栅格占据的列数，总12等分	Enum	0
offset	分栏左边偏移，计算方式与`span`相同	String \| Number	0
justify	水平排列方式	Enum	start
align	垂直对齐方式	Enum	stretch
textAlign	文字水平对齐方式	Enum	left

Row Events

事件名	说明	类型
click	`row`被点击	Function

Col Events

事件名	说明	类型
click	`col`被点击，会阻止事件冒泡到`row`	Function