设计规则

协助进行页面级整体布局。

尺寸

一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。

• 顶部导航（大部分系统）：一级导航高度 64px，二级导航 48px。
• 顶部导航（展示类页面）：一级导航高度 80px，二级导航 56px。
• 顶部导航高度的范围计算公式为：48+8n。
• 侧边导航宽度的范围计算公式：200+8n。

交互

• 一级导航和末级的导航需要在可视化的层面被强调出来；
• 当前项应该在呈现上优先级最高；
• 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
• 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。

视觉

导航样式上需要根据信息层级合理的选择样式：

• 大色块强调

建议用于底色为深色系时，当前页面父级的导航项。

• 高亮火柴棍

当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。

• 字体高亮变色

从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。

• 字体放大

12px、14px 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。

组件概述

Layout：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。
Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout中。

代码演示

1.基本结构

典型的页面布局。

<template>
  <div id="components-layout-demo-basic">
    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout-content>Content</a-layout-content>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>

    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout>
        <a-layout-sider>Sider</a-layout-sider>
        <a-layout-content>Content</a-layout-content>
      </a-layout>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>

    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout>
        <a-layout-content>Content</a-layout-content>
        <a-layout-sider>Sider</a-layout-sider>
      </a-layout>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>

    <a-layout>
      <a-layout-sider>Sider</a-layout-sider>
      <a-layout>
        <a-layout-header>Header</a-layout-header>
        <a-layout-content>Content</a-layout-content>
        <a-layout-footer>Footer</a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>

<style>
#components-layout-demo-basic {
  text-align: center;
}
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  background: #7dbcea;
  color: #fff;
}
#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}
#components-layout-demo-basic .ant-layout-sider {
  background: #3ba0e9;
  color: #fff;
  line-height: 120px;
}
#components-layout-demo-basic .ant-layout-content {
  background: rgba(16, 142, 233, 1);
  color: #fff;
  min-height: 120px;
  line-height: 120px;
}
#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}
#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}
</style>

2.自定义触发器

要使用自定义触发器，可以设置 :trigger="null" 来隐藏默认设定。

<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider
      :trigger="null"
      collapsible
      v-model="collapsed"
    >
      <div class="logo" />
      <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['1']">
        <a-menu-item key="1">
          <a-icon type="user" />
          <span>nav 1</span>
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="video-camera" />
          <span>nav 2</span>
        </a-menu-item>
        <a-menu-item key="3">
          <a-icon type="upload" />
          <span>nav 3</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="()=> collapsed = !collapsed"
        />
      </a-layout-header>
      <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
        Content
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
export default {
  data(){
    return {
      collapsed: false,
    }
  },
}
</script>

<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color .3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255,255,255,.2);
  margin: 16px;
}
</style>

3.顶部-侧边布局-通栏

同样拥有顶部导航及侧边栏，区别是两边未留边距，多用于应用型的网站。

<template>
  <a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        :defaultSelectedKeys="['2']"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">nav 1</a-menu-item>
        <a-menu-item key="2">nav 2</a-menu-item>
        <a-menu-item key="3">nav 3</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          mode="inline"
          :defaultSelectedKeys="['1']"
          :defaultOpenKeys="['sub1']"
          :style="{ height: '100%', borderRight: 0 }"
        >
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="user" />subnav 1</span>
            <a-menu-item key="1">option1</a-menu-item>
            <a-menu-item key="2">option2</a-menu-item>
            <a-menu-item key="3">option3</a-menu-item>
            <a-menu-item key="4">option4</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="laptop" />subnav 2</span>
            <a-menu-item key="5">option5</a-menu-item>
            <a-menu-item key="6">option6</a-menu-item>
            <a-menu-item key="7">option7</a-menu-item>
            <a-menu-item key="8">option8</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <span slot="title"><a-icon type="notification" />subnav 3</span>
            <a-menu-item key="9">option9</a-menu-item>
            <a-menu-item key="10">option10</a-menu-item>
            <a-menu-item key="11">option11</a-menu-item>
            <a-menu-item key="12">option12</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>Home</a-breadcrumb-item>
          <a-breadcrumb-item>List</a-breadcrumb-item>
          <a-breadcrumb-item>App</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
          Content
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data () {
    return {
      collapsed: false,
    }
  },
}
</script>

<style>
#components-layout-demo-top-side-2 .logo {
  width: 120px;
  height: 31px;
  background: rgba(255,255,255,.2);
  margin: 16px 28px 16px 0;
  float: left;
}
</style>

4.顶部-侧边布局

拥有顶部导航及侧边栏的页面，多用于展示类网站。

<template>
  <a-layout id="components-layout-demo-top-side">
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        :defaultSelectedKeys="['2']"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">nav 1</a-menu-item>
        <a-menu-item key="2">nav 2</a-menu-item>
        <a-menu-item key="3">nav 3</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item>List</a-breadcrumb-item>
        <a-breadcrumb-item>App</a-breadcrumb-item>
      </a-breadcrumb>
      <a-layout style="padding: 24px 0; background: #fff">
        <a-layout-sider width="200" style="background: #fff">
          <a-menu
            mode="inline"
            :defaultSelectedKeys="['1']"
            :defaultOpenKeys="['sub1']"
            style="height: 100%"
          >
            <a-sub-menu key="sub1">
              <span slot="title"><a-icon type="user" />subnav 1</span>
              <a-menu-item key="1">option1</a-menu-item>
              <a-menu-item key="2">option2</a-menu-item>
              <a-menu-item key="3">option3</a-menu-item>
              <a-menu-item key="4">option4</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <span slot="title"><a-icon type="laptop" />subnav 2</span>
              <a-menu-item key="5">option5</a-menu-item>
              <a-menu-item key="6">option6</a-menu-item>
              <a-menu-item key="7">option7</a-menu-item>
              <a-menu-item key="8">option8</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub3">
              <span slot="title"><a-icon type="notification" />subnav 3</span>
              <a-menu-item key="9">option9</a-menu-item>
              <a-menu-item key="10">option10</a-menu-item>
              <a-menu-item key="11">option11</a-menu-item>
              <a-menu-item key="12">option12</a-menu-item>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
        <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
          Content
        </a-layout-content>
      </a-layout>
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      Ant Design ©2018 Created by Ant UED
    </a-layout-footer>
  </a-layout>
</template>

<style>
#components-layout-demo-top-side .logo {
  width: 120px;
  height: 31px;
  background: rgba(255,255,255,.2);
  margin: 16px 28px 16px 0;
  float: left;
}
</style>

5.上中下布局

最基本的『上-中-下』布局。
一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。

<template>
  <a-layout id="components-layout-demo-top" class="layout">
    <a-layout-header>
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        :defaultSelectedKeys="['2']"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">nav 1</a-menu-item>
        <a-menu-item key="2">nav 2</a-menu-item>
        <a-menu-item key="3">nav 3</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item>List</a-breadcrumb-item>
        <a-breadcrumb-item>App</a-breadcrumb-item>
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">Content</div>
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      Ant Design ©2018 Created by Ant UED
    </a-layout-footer>
  </a-layout>
</template>
<style>
#components-layout-demo-top .logo {
  width: 120px;
  height: 31px;
  background: rgba(255,255,255,.2);
  margin: 16px 24px 16px 0;
  float: left;
}
</style>

6.响应式布局

Layout.Sider 支持响应式布局。

说明：配置 breakpoint 属性即生效，视窗宽度小于 breakpoint 时 Sider 缩小为 collapsedWidth 宽度，若将 collapsedWidth 设置为零，会出现特殊 trigger。

<template>
  <a-layout id="components-layout-demo-responsive">
    <a-layout-sider
      breakpoint="lg"
      collapsedWidth="0"
      @collapse="onCollapse"
      @breakpoint="onBreakpoint"
    >
      <div class="logo" />
      <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['4']">
        <a-menu-item key="1">
          <a-icon type="user" />
          <span class="nav-text">nav 1</span>
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="video-camera" />
          <span class="nav-text">nav 2</span>
        </a-menu-item>
        <a-menu-item key="3">
          <a-icon type="upload" />
          <span class="nav-text">nav 3</span>
        </a-menu-item>
        <a-menu-item key="4">
          <a-icon type="user" />
          <span class="nav-text">nav 4</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header :style="{ background: '#fff', padding: 0 }" />
      <a-layout-content :style="{ margin: '24px 16px 0' }">
        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
          content
        </div>
      </a-layout-content>
      <a-layout-footer style="textAlign: center">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  methods: {
    onCollapse(collapsed, type) {
      console.log(collapsed, type);
    },
    onBreakpoint(broken) {
      console.log(broken);
    }
  }
}
</script>

<style>
#components-layout-demo-responsive .logo {
  height: 32px;
  background: rgba(255,255,255,.2);
  margin: 16px;
}
</style>

7.固定侧边栏

当内容较长时，使用固定侧边栏可以提供更好的体验。

<template>
  <a-layout id="components-layout-demo-fixed-sider">
    <a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
      <div class="logo"></div>
      <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['4']">
        <a-menu-item key="1">
          <a-icon type="user" />
          <span class="nav-text">nav 1</span>
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="video-camera" />
          <span class="nav-text">nav 2</span>
        </a-menu-item>
        <a-menu-item key="3">
          <a-icon type="upload" />
          <span class="nav-text">nav 3</span>
        </a-menu-item>
        <a-menu-item key="4">
          <a-icon type="bar-chart" />
          <span class="nav-text">nav 4</span>
        </a-menu-item>
        <a-menu-item key="5">
          <a-icon type="cloud-o" />
          <span class="nav-text">nav 5</span>
        </a-menu-item>
        <a-menu-item key="6">
          <a-icon type="appstore-o" />
          <span class="nav-text">nav 6</span>
        </a-menu-item>
        <a-menu-item key="7">
          <a-icon type="team" />
          <span class="nav-text">nav 7</span>
        </a-menu-item>
        <a-menu-item key="8">
          <a-icon type="shop" />
          <span class="nav-text">nav 8</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout :style="{ marginLeft: '200px' }">
      <a-layout-header :style="{ background: '#fff', padding: 0 }" />
      <a-layout-content :style="{ margin: '24px 16px 0', overflow: 'initial' }">
        <div :style="{ padding: '24px', background: '#fff', textAlign: 'center' }">
          ...
          <br />
          Really
          <br />...<br />...<br />...<br />
          long
          <br />...<br />...<br />...<br />...<br />...<br />...
          <br />...<br />...<br />...<br />...<br />...<br />...
          <br />...<br />...<br />...<br />...<br />...<br />...
          <br />...<br />...<br />...<br />...<br />...<br />...
          <br />...<br />...<br />...<br />...<br />...<br />...
          <br />...<br />...<br />...<br />...<br />...<br />...
          <br />...<br />...<br />...<br />...<br />...<br />
          content
        </div>
      </a-layout-content>
      <a-layout-footer :style="{ textAlign: 'center' }">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<style>
#components-layout-demo-fixed-sider .logo {
  height: 32px;
  background: rgba(255,255,255,.2);
  margin: 16px;
}
</style>

8.固定头部

一般用于固定顶部导航，方便页面切换。

<template>
  <a-layout id="components-layout-demo-fixed">
    <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        :defaultSelectedKeys="['2']"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">nav 1</a-menu-item>
        <a-menu-item key="2">nav 2</a-menu-item>
        <a-menu-item key="3">nav 3</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }">
      <a-breadcrumb :style="{ margin: '16px 0' }">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item>List</a-breadcrumb-item>
        <a-breadcrumb-item>App</a-breadcrumb-item>
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: '24px', minHeight: '380px' }">Content</div>
    </a-layout-content>
    <a-layout-footer :style="{ textAlign: 'center' }">
      Ant Design ©2018 Created by Ant UED
    </a-layout-footer>
  </a-layout>
</template>
<style>
#components-layout-demo-fixed .logo {
  width: 120px;
  height: 31px;
  background: rgba(255,255,255,.2);
  margin: 16px 24px 16px 0;
  float: left;
}
</style>

9.侧边布局

侧边两列式布局。页面横向空间有限时，侧边导航可收起。
侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。

API

<Layout>
  <Header>header</Header>
  <Layout>
    <Sider>left sidebar</Sider>
    <Content>main content</Content>
    <Sider>right sidebar</Sider>
  </Layout>
  <Footer>footer</Footer>
</Layout>

Layout 布局容器

Layout.Header Layout.Footer Layout.Content API 与 Layout 相同

Layout.Sider 侧边栏

事件

{
xs: ‘480px’,
sm: ‘576px’,
md: ‘768px’,
lg: ‘992px’,
xl: ‘1200px’,
xxl: ‘1600px’,
}

基本布局

上-中-下 布局

<a-layout>
  <a-layout-header>Header</a-layout-header>
  <a-layout-content>Content</a-layout-content>
  <a-layout-footer>Footer</a-layout-footer>
</a-layout>

上-左右-下 布局

<a-layout>
  <a-layout-header>Header</a-layout-header>
  <a-layout>
    <a-layout-sider>Sider</a-layout-sider>
    <a-layout-content>Content</a-layout-content>
  </a-layout>
  <a-layout-footer>Footer</a-layout-footer>
</a-layout>

左-上中下 布局

<a-layout>
  <a-layout-sider>Sider</a-layout-sider>
  <a-layout>
    <a-layout-header>Header</a-layout-header>
    <a-layout-content>Content</a-layout-content>
    <a-layout-footer>Footer</a-layout-footer>
  </a-layout>
</a-layout>

常用属性

Layout.Sider

常用事件

• collapse 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发
• breakpoint 触发响应式布局断点时的回调

说明：

• 左边区域一般放置Menu菜单，若应用型网站菜单过多也可以在Header上再设置一个菜单；
• Layout.Sider支持响应式布局：配置 breakpoint属性即生效，视窗宽度小于 breakpoint 时 Sider 缩小为 collapsedWidth宽度，若将 collapsedWidth设置为零，会出现特殊 trigger；
• 当内容较长时，使用固定侧边栏可以提供更好的体验：a-layout-sider设置为fixed定位；
• 若想头部固定，可以设置a-layout-header为fixed定位

经典布局：

<a-layout id="components-layout-demo-top-side-2">
  <a-layout-header class="header">
    <div class="logo" />
    <a-menu
      theme="dark"
      mode="horizontal"
      :default-selected-keys="['2']"
      :style="{ lineHeight: '64px' }"
    >
      <a-menu-item key="1">nav 1</a-menu-item>
      <a-menu-item key="2">nav 2</a-menu-item>
      <a-menu-item key="3">nav 3</a-menu-item>
    </a-menu>
  </a-layout-header>
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <a-menu
        mode="inline"
        :default-selected-keys="['1']"
        :default-open-keys="['sub1']"
        :style="{ height: '100%', borderRight: 0 }"
      >
        <a-sub-menu key="sub1">
          <span slot="title"><a-icon type="user" />subnav 1</span>
          <a-menu-item key="1">option1</a-menu-item>
          <a-menu-item key="2">option2</a-menu-item>
          <a-menu-item key="3">option3</a-menu-item>
          <a-menu-item key="4">option4</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <span slot="title"><a-icon type="laptop" />subnav 2</span>
          <a-menu-item key="5">option5</a-menu-item>
          <a-menu-item key="6">option6</a-menu-item>
          <a-menu-item key="7">option7</a-menu-item>
          <a-menu-item key="8">option8</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout style="padding: 0 24px 24px">
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item>List</a-breadcrumb-item>
        <a-breadcrumb-item>App</a-breadcrumb-item>
      </a-breadcrumb>
      <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
      >
        Content
      </a-layout-content>
    </a-layout>
  </a-layout>
</a-layout>

前言

在UGUI1中，Canvas下的每个GameObject都会自动添加 Rect Transform 组件来控制自身的位置和大小。通常情况下，基于Rect Transform的布局系统已经足够灵活，可以方便地满足大部分UI布局的需要。利用UGUI中的 anchor（锚点）和 pivot（轴点）特性，可以让UI GameObject2实现大部分依赖父容器的定位功能，例如绑定在父容器的左上角或正中央，长度和宽度撑满父类等功能。

然而，另外的一些需要父容器依赖子类的UI功能，仅仅使用Rect Transform则很难做到。例如，让Text文本框的大小根据字数动态变化；让列表的长度根据列表项的数量动态变化等等。它们可能满足以下条件中的一条和多条：

1. 容器的具体大小在设计阶段无法提前预知
2. 父容器的大小可能会在运行时动态变化
3. 父容器的布局很大程度上依赖于子类

这种情况下，使用 Auto Layout （自动布局）往往可以达到预期的效果。

概念

Auto Layout

自动布局系统为具有嵌套结构的UI布局提供了可行方案（例如水平或垂直列表或表格），并且允许布局元素根据其包含的子类内容进行大小调节（例如可以根据文本调节自身大小的Text）。

自动布局系统是基于最基础的 Rect Transform 来构筑的，它可以使用在任何一个包含 Rect Transform 的元素上。

自动布局系统主要基于 layout elements 和 layout controllers 两种概念 。本文着重介绍 layout elements。

Layout Elements

在Unity中， Layout Element 具有广义和狭义的区别。狭义上说，Layout Element 是一种可选的UI组件；广义上说， Layout Element指一切附加有 Rect Transform以及 其他任意数量的UI组件的GameObject。 Auto Layout 中提到的 Layout Elements 显然指的是其广义概念。

正因为广义上说所有UI GameObject都或多或少地扮演了 Layout Element的角色，所以每个UI GameObject都可以在其对应的Inspector面板中找到自身的Layout Properties参数。下面是一个新建的Text组件的Layout Properties示意图：

实际情况和图片不符？
首先底部的黑底部分是可以通过其左上角的DropDown进行切换的，其次仅含有RectTransform 的 UI GameObject是不会显示该面板的。
事实上，所有含有 Rect Transform的 UI GameObject都可以充当Layout Element。

Layout Properties（布局属性）

就像上一节中图片中显示的一样，一个广义上的Layout Element包含以下六条属性：

1. Minmum width
2. Minmum height
3. Preferred width
4. Preferred height
5. Flexible width
6. Flexible height

它们的默认值都是0，一些特定的UI组件（Components）在附加到具体的UI GameObject上时可以改变其布局属性。典型的例子就是Text以及Image组件，它们会改变 Preferred width 和 Preferred height来匹配图片或文本内容。

以Text为例来测试，默认情况下Text会根据文本的内容和字体大小都因素来修改Preferred width 和 Preferred height。当没有任何文本时，Preferred width为 0，Preferred height为16（与Font Size等属性有关，表示一行的高度）；在Text一栏随意添加几行内容，会发现Preferred width 和 Preferred height会根据文本的行宽和行高来动态变化。

除此之外，如果对Text自带的布局属性不满意，我们也可以通过手动添加一个 Layout Element 组件（即狭义含义）来修改其中的任何一项属性，该组件设置的属性优先于Text，Image等内置组件，并且可以同时存在多个，它们的优先级可以通过 “Layout Priority”来调节。

深入

虽然上一节我们知道了Layout Element包含了六种属性，并且如何查看它们。但是我们还没有涉及到一个重要的问题——它们是如何在UI布局系统中发挥作用的？

表面上看，虽然Text在文本改变时也会动态修改UI GameObject自身的布局属性，但是它们并没有对该元素在UI中的位置和大小等信息进行任何影响。Text组件依然会在Rect Transform中指定好的区域中渲染绘制，而这些属性完全是在游戏运行前手动指定的。所谓的Layout Element 完全没有贡献一丝一毫的力量。

事实上， Layout Element具有一个UI GameObject动态布局时所需要的特定信息，但是它本身并不会负责设置这些信息。还记得Auto Layout的两大基本概念么？另一个Layout Controller就是负责读取 Layout Element包含的信息，然后控制一个UI元素实际的大小的。如果没有手动添加Layout controller派系的组件，UI GameObject上的Layout Element完全就是摆设，它就是你空调上那些永远不会用到的按钮，因为你的空调根本久没有安装这些功能。

所以为了演示Layout Element的真实价值，本文还是不得不使用Layout Controllers派系的组件来配合演出，但主角依然是我们的 Layout Element。

Layout Property 如何发挥光和热

不同于基础的 Rect Transform布局系统，在自动布局系统中，我们需要考虑一个UI元素在变化状态时是如何修改自身的大小的。这也是为什么布局属性需要使用三套方案设置大小，而不是单纯的固定width和 height。下面给出这些属性发挥作用的基本原则：

• Minmum width/height 最先被分配，不带任何妥协
• 如果父类容器中仍有多余的空间，那么 Preferred width/height 会被分配
• 如果上面两条分配完了之后仍有额外的空间，那么 flexible width/height 会被继续分配

没有听懂吧？没关系，听懂了本文剩余的部分就都是废话了，你可以关掉来节省几分钟的时间休息。下面将通过一个逐步实现的实验来讲解这三条原则的含义。

探索实验之旅开始。。

本小节会使用一个Layout Controller派系的组件来辅助实验的进行，它的名字叫做 Horizontal Layout Group。你暂时不需要对它有过多的了解，只需要知道它是让Layout Element生效的魔法口诀就行了。

实际上，Horizontal Layout Group属于Layout Group的一种，用于快速创建一种横向的布局结构，如果把UI GameObject作为子类放在其下，它们就会像排队一样整齐地展开。

准备工作

创建下面演示的Hierarchy结构，Canvas是画布对象，可以通过在Hierarchy中 右键-UI-Canvas来创建。Parent和两个子对象都是Create Empty创建得到，只包含 Rect Transform 组件。将Parent的Width设置为40, Height设置为20。

随后在 Parent，Child1以及Child2上分别添加一个Image组件，用于直观地显示三种容器的大小。颜色最好采用不同的方便区分。这里我采用的颜色是Parent（蓝色），Child1（粉色）， Child2（绿色）。

-Canvas
  -Parent
    -Child1
    -Child2

最后也是最重要的一步，就是在Parent上添加一个Horizontal Layout Group组件，不出意外的话，你可以看到如图所示的效果。

如果你还记得上一节学过的知识，可能会产生一些疑问：单独查看Child的Layout Properties时，会发现 Minmum width/height 和 Preferred width/height 都是 0，如果Layout Controller 真的生效了，为什么两张图片的大小不是0？ 原因就在于虽然Horizontal Layout Group属于Layout Controller，但它还在背地里偷偷地修改了Layout Element的计算规则，当然下一节我们就会屏蔽这种效果。

Minmum width/height

为了观察Minmum width/height 对图片大小的影响，我们需要对Horizontal Layout Group进行一些小幅的修改。如下图所示：

这时再观察显示效果，你会发现两张Child图片都“消失”不见了。这时因为子类的Image设置的Layout Element属性起了作用。由于两张图片的Minmum和Preferred大小都为0，所以在Layout Controller的驱动下，它们的大小都变成了0。不仅如此，如果你是一个善于观察的人，还可以发现 Rect Transform中调节 Width和Height的属性都变成了灰色。这也从侧面表明Layout Element中设置的属性成功生效，并覆盖了Rect Transform中的属性。

这也解决了上一节末尾提出的问题。你也可以为Image组件添加一张Source Image观察一下变化。

当然，有的情况下我们不想使用Image为我们设置的布局属性。这时我们就可以添加Layout Element来覆盖这一默认属性。为Child1和Child2分别添加一个Layout Element组件，并且将它们的Min Width/Height设置为10。由于Layout Element设置的布局属性优先级高于Image组件，所以两个Child又会以10*10的大小再次出现。随后以20*20，30*30的大小再次测试，可以看到下图所示的效果。

不知道你有没有发现规律？实际上，Min Width/height 是最低标准，在动态布局中，每个布局元素至少要保持其自身Min Width/Height 的大小，这一大小不会因为父类容器的大小而产生任何改变，完全没有妥协的余地。因此，这一条规则也最容易理解。

Preferred Width/Height

现在进入实验的第二阶段，即Preferred Width/Height 的作用原理。先将两个Child子类的 Min Width/Height 恢复成 10*10，然后将Preferred Width/Height设置成 20*20。

还记得Parent的大小么？没错，40*20。我们这次通过修改Parent的Width来观察两个Child的变化情况。

Okay， 现在来总结一下规律：

1. 无论父容器如何变化，子类始终满足 Min Size (如 15 * 20所示）
2. 如果子类在满足Min Size的情况下，父容器还有多余的空间可供使用，那么所有拥有Preferred Size的子类会平分多余的空间。（如30＊20）。
3. 当父类空间分配给单个子类的空间超过Preferred Size后，该子类的大小不会继续增长（仅限未设置flexible size的情况）。

Flexible Width/Height

现在进入第三个阶段，让我们看看Flexible Width/Height是如何生效的。如果你实际操作了上面的两个过程，可能会发现Min和Preferred都是以常规单位计算的，然而Flexible则是以相对单位计算的。如果任何广义上的Layout Element拥有大于0的Flexible Size，就意味着所有的剩余空间都会被其填满。当然，有很大的几率同时存在多个子容器拥有大于0的Flexible Size，这种情况下它们不会像Preferred Size一样简单的平分，而是根据Flexible Size的数值比例平分。

当然，仅当满足Min Size以及Preferred Size的计算后，才会考虑Flexible Size。为了方便测试，我们可以先取消Layout Element中 Min Size和Preferred Size的设置（这样两个Child都只会使用Image组件设置的默认值0，对Flexible Size计算不会产生任何影响）。下面是三种不同的Flexible Size比例下两种子容器的大小情况。

还记得那个”Horizontal Layout Group“么？在实验的第一步我们修改了其中的两个选项——即Child Controls Size和Child Force Expand。前一项的作用就是屏蔽掉这个Layout Controller对布局属性的影响，完全使用子容器的布局属性进行设置；后一项则是将所有子容器的Flexible Size都设置为1，这样就可以让所有子容器以填充的方式平分父容器。

结语

本文以我个人的视角大致讲解了一下Layout Element的原理和如何查看和设置布局元素对应的布局属性。在使用时一定要牢记Layout Element对应的布局属性并不会自动生效，必须以Layout Controller作为驱动。欢迎各位程序猿朋友给我留言，有什么疑问我会尽快答复。

扩展阅读

Unity Manual - Auto Layout
Unity Manual - Layout Element