-
2021-07-06 10:17:02更多相关内容
-
vue、Layout 布局、Layout 属性事件、vue Layout 全部布局、vue Layout 全部属性事件
2019-09-27 14:43:41vue、Layout 布局、Layout 属性、vue Layout 全部布局、vue Layout 全部属性vue、Layout 布局、Layout 属性事件、vue Layout 全部布局、vue Layout 全部属性事件
设计规则
协助进行页面级整体布局。
尺寸
一级导航项偏左靠近 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 布局容器
参数 说明 类型 默认值 class
容器 class string
-
style
指定样式 object
-
hasSider
表示子元素里有 Sider,一般不用指定。可用于服务端渲染时避免样式闪动 boolean
-
Layout.Header
Layout.Footer
Layout.Content
API 与Layout
相同Layout.Sider 侧边栏
参数 说明 类型 默认值 breakpoint
触发响应式布局的断点 Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }
-
class
容器 class string
-
collapsed(v-model)
当前收起状态 boolean
-
collapsedWidth
收缩宽度,设置为 0 会出现特殊 trigger number
80
collapsible
是否可收起 boolean
false
defaultCollapsed
是否默认收起 boolean
false
reverseArrow
翻转折叠提示箭头的方向,当 Sider 在右边时可以使用 boolean
false
style
指定样式 `object string` theme
主题颜色 string: light dark
dark
trigger
自定义 trigger,设置为 null 时隐藏 trigger `string slot` width
宽度 ` number string` 事件
事件名称 说明 回调参数 collapse
展开-收起时的回调函数,有点击 trigger 以及响应式反馈两种方式可以触发 (collapsed, type) => {}
breakpoint
触发响应式布局断点时的回调 (broken) => {}
breakpoint width {
xs: ‘480px’,
sm: ‘576px’,
md: ‘768px’,
lg: ‘992px’,
xl: ‘1200px’,
xxl: ‘1600px’,
} - 顶部导航(大部分系统):一级导航高度
-
【Ant Design Vue】之layout布局
2021-03-11 17:47:01文章目录 基本布局 常用属性 常用事件 基本布局 上-中-下 布局 <a-layout> <a-layout-header>Headera-layout-header> <a-layout-content>Contenta-layout-content> <a-layout-footer>Footera-layout-footer> a-...基本布局
上-中-下
布局
<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
属性 说明 默认 breakpoint 触发响应式布局的断点( { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }
)collapsed(v-model) 当前收起状态 collapsible 是否可收起 false
defaultCollapsed 是否默认收起 false
theme 主题颜色 light
/dark
dark
常用事件
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>
-
Unity/Auto Layout -- 理解Layout Elements(布局元素)
2018-03-13 17:11:59组件(即狭义含义)来修改其中的任何一项属性,该组件设置的属性优先于Text,Image等内置组件,并且可以同时存在多个,它们的优先级可以通过 “Layout Priority”来调节。 深入 虽然上一节我们知道了 ...前言
在UGUI1中,Canvas下的每个GameObject都会自动添加
Rect Transform
组件来控制自身的位置和大小。通常情况下,基于Rect Transform
的布局系统已经足够灵活,可以方便地满足大部分UI布局的需要。利用UGUI中的anchor
(锚点)和pivot
(轴点)特性,可以让UI GameObject
2实现大部分依赖父容器的定位功能,例如绑定在父容器的左上角或正中央,长度和宽度撑满父类等功能。然而,另外的一些需要父容器依赖子类的UI功能,仅仅使用
Rect Transform
则很难做到。例如,让Text文本框的大小根据字数动态变化;让列表的长度根据列表项的数量动态变化等等。它们可能满足以下条件中的一条和多条:- 容器的具体大小在设计阶段无法提前预知
- 父容器的大小可能会在运行时动态变化
- 父容器的布局很大程度上依赖于子类
这种情况下,使用 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
包含以下六条属性:- Minmum width
- Minmum height
- Preferred width
- Preferred height
- Flexible width
- 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, 现在来总结一下规律:
- 无论父容器如何变化,子类始终满足 Min Size (如 15 * 20所示)
- 如果子类在满足Min Size的情况下,父容器还有多余的空间可供使用,那么所有拥有Preferred Size的子类会平分多余的空间。(如30*20)。
- 当父类空间分配给单个子类的空间超过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
作为驱动。欢迎各位程序猿朋友给我留言,有什么疑问我会尽快答复。扩展阅读
-
vue-grid-layout 的使用
2021-01-04 17:38:50vue-grid-layout中文文档 我需要用到这里面的可拖拽的效果。 碰到的问题 在安装完这个插件之后,在IE上无法打开,并报错缺少:,最终是下面这篇文章解决问题 Vue项目下IE报错 SCRIPT1003: 缺少 ‘:’,导致页面空白... -
Android 相对布局别自己快遗忘的属性layout_alignRight,layout_alignBottom,layout_alignTop,layout_...
2019-09-11 17:25:06今天在群里看到有人提到layout_alignRight 这种属性,自己想了半天居然没有了印象 赶紧写一个布局看看这个相对布局的属性 先看下自己常用的属性 android:alignParentBottom android:layout_alignParentLeft ... -
matplotlib之pyplot模块——调整子图布局(subplots_adjust、tight_layout)
2021-04-26 11:22:48在pyplot模块中,与调整子图布局的函数主要为subplots_adjust和tight_layout,其中subplots_adjust是修改子图间距的通用函数,tight_layout默认执行一种固定的间距配置,也可以自定义间距配置,底层原理类似于... -
RelativeLayout中layout_below失效的可能其他view使用了layout_centerVertical
2022-03-31 10:02:28在RelativeLayout中使用layout_below布局显示在某组件下方,但是出现混乱直接覆盖上面的组件; 2. 错误原因 因为RelativeLayout没有设置高度,其他组件使用了相对布局的: android:layout_centerVertical="true... -
Android系统布局——android.R.layout详解
2018-09-23 00:31:03布局文件,作为android中...系统布局文件:android.R.layout.xxx; 用户自定义布局文件:R.layout.xxx; 那系统布局文件究竟有哪一些,大家在用的时候如果不了解,心里估计有点惴惴。现在下方图中列出所有系统布局,... -
QT之layout参数设置
2021-07-15 15:19:59layoutLeftMargin: layout内的布局距离边框左端的距离。 layoutTopMargin: layout内的布局距离边框顶端的距离。 layoutRightMargin: layout内的布局距离边框右端的距离。 layoutBottomMargin: layout内的布局距离... -
openGL之API学习(四十七)layout作用详解
2019-04-17 21:42:22原文在https://www.khronos.org/opengl/wiki/Layout_Qualifier_(GLSL) GLSL语言规范中也有对此的详细说明https://www.khronos.org/registry/OpenGL/specs/gl/GLSLangSpec.4.60.pdf 这里大致翻译如下: 布局限定符... -
The layout <layout> in layout has no declaration
2020-04-30 16:27:15安卓开发。 当你创建一个布局文件ABCD.XML 报错The layout <layout> in layout has no declaration 时。 把你的 布局文文件名字全改为小写就可以了 abcd.xml 。 。。。。。 ... -
layout_weight属性的用法和意义
2019-05-07 10:01:02一直没理解在LinearLayout中的layout_weight属性的意义,使用的时候都是将子控件的layout_width或者layout_height设置为0,然后在设置layout_weight的权重值,以至于在被问到如果设置了layout_width为具体的值时对... -
LinearLayout中layout_weight设置无效
2019-12-22 09:44:45发现LinearLayout中layout_weight设置无效,检查是否是RecyclerView或ListView中的item项(小问题点,其实也很容易遗漏) 解 1.先检查该布局下layout_width 或 layout_height是否有为0dp的(正常不会犯这种错误) 2.... -
QT: Layout布局间消除间隙(修改layout内置参数)
2021-01-26 13:25:32在设计布局时,为了绘制出边框效果,使用了Frame或者GroupBox布局,内部的控件使用Layout水平布局或者垂直布局,然后全局针对Frame进行了垂直布局,最后栅格化布局 简单演示: 很显然存在两个问题: 1.Frame与... -
Android布局层次结构查看工具-Layout Inspector介绍
2020-03-07 15:49:500、前言,Google牛就牛在什么不好,干脆直接不要 hierarchy viewer:曾经的布局层级工具,说舍弃就舍弃掉 ...1、Layout Inspector就是最新的布局工具 入口:Tools - > Layout Inspector 2、 ... -
Layout常见错误汇总-不定时更
2020-10-08 16:27:331、在做LVS时,出现中断错误 解决方法: 重新建立新的schematic和layout文件,对应好其中的元器件,同时两个文件的名字也要对应好“schematic”和“layout”,其他名字的话软件找不到如何对应。 -
Android --- layout_marginStart和layout_marginEnd的详细讲解
2019-08-11 18:42:328.4.6 从右到左布局(RTL Layout) 从Android 4.2开始,Android SDK支持一种从右到左(RTL,Right-to-Left)UI布局的方式,尽管这种布局方式经常... -
Unity 之 UGUI Layout自动布局组件详解
2020-10-11 23:12:30Unity 之 UGUI Layout自动布局组件详解 1,布局元素 (Layout Element) 2,水平布局组 (Horizontal Layout Group) 3,垂直布局组 (Vertical Layout Group) 4,网格布局组 (Grid Layout Group) 5, 相关扩展 1), 使用示例 2... -
Android界面布局属性layout_gravity和gravity的区别
2020-12-16 10:32:06一、layout_gravity和gravity的作用 1、android:layout_gravity是设置该控件相对于父容器对齐方式; 2、android:gravity是设置子元素在该容器内的对齐方式。 3、layout_gravity和gravity可以设置的值:top、bottom... -
DC-DC PCB layout 指导
2020-05-14 14:03:57DC-DC 的电路比 LDO 会复杂很多,噪声也更大,布局和 layout 要求更高,layout 的好坏直接影响 DC-DC 的性能,所以了解 DC-DC 的 layout 至关重要。 文章目录1. Bad layout2. 一般原则① 开关回路短② 单点接地3. ... -
android:layout_alignleft layout_toleftof区别,详解RelativeLayout布局属性
2017-11-02 11:32:40(会对所有的对其方式解释,且主要讨论layout_alignleft layout_toleftof区别) android:layout_above 将该控件的底部至于给定ID的控件之上(只写一行代该控件底部与id控件上边缘对其,且默认于父布局左边) ... -
vue 之配置路由 和 layout布局
2020-10-11 14:47:42目录配置路由router/index.jslayout/index.js 配置路由 router/index.js 基础的路由配置 还有登录权限的配置 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [{... -
Android layout_margin_top等无效的可能
2022-04-15 14:41:57遇到一个问题,发现 layout_margin_top 总是无效。 应该是: Style 里面不能 封装 layout_margin 外部无法重写 layout_margin 优先级会更高 -
【Umi】Layout 布局的实现!!!
2020-09-11 16:55:10Layout 布局的实现 先看效果 当点击菜单项时会进行跳转,利用Umi的链接组件<Link></Link> - 当点击用户管理时: - 当点击商品质量时: 目录文件 这里运用了yarn,这里有详情: ... -
PyQt5入门——删除、清空layout布局中的所有对象(含常见问题详解)
2021-08-17 11:00:43文章目录问题描述清空layout中的所有对象 问题描述 有一种需求是动态创建layout中的内容,这时就需要先删除之前在layout中添加过的对象。 在网上查资料1看到用layout.itemAt(i).widget().deleteLater()来删除layout... -
Android Studio 4.0 新功能之 Layout Validation
2020-05-30 20:31:53最近 Android Studio 4.0 稳定版本正式发布,作为一个大版本升级,4.0带来了不少新功能 Android Studio 4.0 ,Layout Validation便是其中一个实用功能 What is Layout Validation Android Studio虽然可以帮助我们对... -
Ant Design Vue之布局layout
2020-09-11 11:35:17根据业务需要想直接用layout组件,实现如下效果: 然后吧代码复制: <template> <a-layout id="components-layout-demo-custom-trigger"> <a-layout-sider v-model="collapsed" :trigger=... -
unity之Layout Group居中显示
2020-04-09 20:24:17推荐阅读: 我的CSDN 我的博客园 ...首先介绍一下Layout Group,unity的LayoutGroup分为三种, Horizontal Layout Group(水平布局) Vertical Layout Group(垂直布局) Grid Layout Group... -
ConstraintLayout app:layout_constraintVertical_bias= app:layout_constraintHeight_percent= 关系
2019-05-15 17:05:42有很多blog已经写的很详细了: 贴上他们的地址: Android ConstraintLayout百分比布局-适配终结者(基本适配所有机型) ConstraintLayout在项目中实践与总结 ...app:layout_constraintVertical_bias="1" ...