精华内容
下载资源
问答
  • vue、Layout 布局、Layout 属性、vue Layout 全部布局、vue Layout 全部属性

    设计规则

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

    尺寸

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

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

    交互

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

    视觉

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

    • 大色块强调

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

    • 高亮火柴棍

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

    • 字体高亮变色

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

    • 字体放大

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

    组件概述

    Layout:布局容器,其下可嵌套 Header Sider Content FooterLayout 本身,可以放在任何父容器中。
    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容器 classstring-
    style指定样式object-
    hasSider表示子元素里有 Sider,一般不用指定。可用于服务端渲染时避免样式闪动boolean-

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

    Layout.Sider 侧边栏

    参数说明类型默认值
    breakpoint触发响应式布局的断点Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }-
    class容器 classstring-
    collapsed(v-model)当前收起状态boolean-
    collapsedWidth收缩宽度,设置为 0 会出现特殊 triggernumber80
    collapsible是否可收起booleanfalse
    defaultCollapsed是否默认收起booleanfalse
    reverseArrow翻转折叠提示箭头的方向,当 Sider 在右边时可以使用booleanfalse
    style指定样式object|string-
    theme主题颜色string: light darkdark
    trigger自定义 trigger,设置为 null 时隐藏 triggerstring|slot-
    width宽度number|string200

    事件

    事件名称说明回调参数
    collapse展开-收起时的回调函数,有点击 trigger 以及响应式反馈两种方式可以触发(collapsed, type) => {}
    breakpoint触发响应式布局断点时的回调(broken) => {}

    breakpoint width

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

    展开全文
  • UGUI布局组件介绍 Vertical Layout Group、Horizontal Layout Group 和 Grid Layout Group。包括实战演练,适合学习!


    🔔UGUI中布局组件介绍

    本篇文章对Unity中的UGUI常用布局组件进行解析加实例说明,可以对Unity中的组件有更多的知识填充~


    🏳️‍🌈Vertical Layout Group 垂直布局 组件

    在这里插入图片描述
    在这里插入图片描述

    1. Padding 填充 控制上下左右间距
    2. Spacing 间距 子物体之间间距
    3. Child Alignment 子级对齐 子物体对其方式
    4. Child Controls Size 控制子级大小 选中后自动调整,子物体宽高为不可调整状态
    5. Child Force Expand 自力扩展 选中后,子物体自动扩展填充满布局

    🏳️‍🌈Horizontal Layout Group 水平布局 组件

    在这里插入图片描述

    1. Padding 填充 控制上下左右间距
    2. Spacing 间距 子物体之间间距
    3. Child Alignment 子级对齐 子物体对其方式
    4. Child Controls Size 控制子级大小 选中后自动调整,子物体宽高为不可调整状态
    5. Child Force Expand 自力扩展 选中后,子物体自动扩展填充满布局

    🏳️‍🌈Grid Layout Group 网格布局 组件

    在这里插入图片描述

    • 1.Padding:RectOffset类型,矩形偏移
    • 2.Cell Size:Vector2类型,默认值为(100,100),网格中的每个单元格的大小
    • 3.Spacing:这里的Spacing不同于水平布局、垂直布局,是Vector2类型,既然是网格布局,当然存在水平方向的间隔和垂直方向的间隔,这里也不做过多的介绍。
    • 4.Start Corner:Corner枚举类型
    public enum Corner 
    { 
    	UpperLeft = 0,      //左上角
    	UpperRight = 1,     //右上角
    	LowerLeft = 2,      //左下角
    	LowerRight = 3      //右下角
    }
    
    • 5.Start Axis:Axis枚举类型
      (1)Horizontal:水平
      优先水平排列单元格
      (2)Vertical:垂直
      优先垂直排列单元格

    • 6.Child Alignment:子级对齐 子物体对其方式。TextAnchor枚举类型,文本锚点

    • 7.Constraint:Constraint枚举类型

    public enum Constraint 
    { 
    	Flexible = 0,              //不限制行数和列数
    	FixedColumnCount = 1,      //约束指定数量的列数
    	FixedRowCount = 2          //约束指定数量的行数
    }
    

    🎄实战演练

    🏳️‍🌈例子一:当我们需要使用使用垂直布局组件进行开发时

    当我们需要自动生成一个物体让他自动垂直排序布局的时候就可以用到这个组件
    在需要生成物体进行布局排序的父物体上添加Vertical Layout Group组件,并设置好参数值

    参考上面说的每个属性分别是控制功能进行设置!
    在这里插入图片描述
    设置好Vertical Layout Group的属性后,对需要生成的物体进行添加,就可以自动排序生成了~
    添加子物体时的效果:
    在这里插入图片描述


    🏳️‍🌈例子二:当我们需要使用使用水平布局组件进行开发时

    当我们需要自动生成一个物体让他自动水平排序布局的时候就可以用到这个组件
    在需要生成物体进行布局排序的父物体上添加Horizontal Layout Group组件,并设置好参数值

    参考上面说的每个属性分别是控制功能进行设置!
    在这里插入图片描述
    注意箭头的位置,因为Child Force Expand是控制子物体是否需要自动扩展填充布局
    在大多数时候我们并不需要的,因为勾上之后,子物体就会自动填充,就会打垮打乱顺序,所以不勾选即可,上面的垂直布局亦是同理!

    勾选Child Force Expand自动填充时的效果
    在这里插入图片描述
    添加子物体时的效果:
    在这里插入图片描述
    这里大家发现了,当子物体过多时,就会超过父物体的框框限制
    如果是正常开发的时候,我们会希望达到边缘时,会自动换行就好了~
    那就是会用到网格布局组件了,请看下一个实例!


    🏳️‍🌈例子三:当我们需要使用使用网格布局组件进行开发时

    当我们需要自动生成一个物体让他既可以自动水平排序布局,又可以自动换行排序时就可以用到这个组件
    在需要生成物体进行布局排序的父物体上添加Grid Layout Group组件,并设置好参数值

    参考上面说的每个属性分别是控制功能进行设置!
    在这里插入图片描述
    因为可以根据设置来让子物体生成的时候,进行不同方法的排序

    下面来看看第一种方法,从左上角向右触发排序然后向下增加,Start Axis设置为Horizontal ,Start Corner设置为Upper Left:
    在这里插入图片描述

    第二种方法,从左上角向下触发排序,然后向右增加,Start Axis设置为Vertical,Start Corner设置为Upper Left :
    在这里插入图片描述

    第三种方法,从右下角向左触发排序,然后向上增加,Start Axis设置为Horizontal ,Start Corner设置为Lower Right:
    在这里插入图片描述

    • 还有很多种组合,还可以设置每行最多有几个子物体的限制 和 最大行数、列数的限制

    • 这里就不一一试了,这里只是提供几种演示方法提供学习~

    • 但是使用网格布局组件有一个问题,就是添加了网格布局组件后,子物体的大小我们不能设置了

    • 所以一般搭配Layout Element、Content Size Fitter这两个组件进行使用

    • 在下一篇博客会对Layout Element、Content Size Fitter进行讲解使用!


    👥总结

    本文介绍了UGUI中常用的三个布局组件

    分别是垂直布局组件Vertical Layout Group、水平布局组件Horizontal Layout Group 和 网格布局组件Grid Layout Group

    一般在有很多物体生成并需要布局排序的情况下使用,它能帮我们自动进行水平、垂直和网格排序,在很多时候都能用到

    本篇文章就到这里啦,下次再见!

    在这里插入图片描述

    展开全文
  • 今天在群里看到有人提到layout_alignRight 这种属性,自己想了半天居然没有了印象 赶紧写一个布局看看这个相对布局的属性 先看下自己常用的属性 android:alignParentBottom android:layout_alignParentLeft ...

    今天在群里看到有人提到layout_alignRight 这种属性,自己想了半天居然没有了印象

    赶紧写一个布局看看这个相对布局的属性

     先看下自己常用的属性

     android:alignParentBottom

     android:layout_alignParentLeft 

     android:layout_alignParentRight

     android:layout_alignParentTop  

    这四个控件一般属性设置为true 它们相对于父布局的相对位置 ,它们的属性依赖于父布局的RelativeLayout

    在看 下面的属性

    android:layout_alignRight

    android:layout_alignBottom

    android:layout_alignTop

    android:layout_alignLeft

    它们的属性一般相对于指定id的位置,不依赖与父布局的RelativeLayout 

    想入现在 一个相对布局宽和高都是match_parent

    画下面的图

    textView 使用android:layout_alignParentRight 位于了右边 但是高度不好设置了

    当然大家一般都不会把最外的层的相对布局高度设为为match_parent

    这个时候使用相对某个控件的设置还是很好使用的

    代码如下

    android:layout_alignTop="@+id/edt"
    android:layout_alignRight="@+id/edt"
    android:layout_alignBottom="@+id/edt"
    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <EditText
                android:id="@+id/edt"
                android:layout_width="400dp"
                android:layout_height="100dp"
                android:background="@null"
                android:hint="请输入手机号" />
    
            <TextView
                android:id="@+id/txt"
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:layout_alignTop="@+id/edt"
                android:layout_alignRight="@+id/edt"
                android:layout_alignBottom="@+id/edt"
                android:layout_marginTop="25dp"
                android:layout_marginRight="30dp"
                android:layout_marginBottom="25dp"
                android:background="@drawable/drawable_txt"
                android:gravity="center"
                android:text="获取验证码" />
        </RelativeLayout>

    这个就是相对于某一个控件的id 来控制很不错的选择,比如购物车上的数量,等等,方法有很多中,这种方法必能被遗忘

    学而时习之,温故而知新。。。

     

    展开全文
  • The layout "activity_main" in layout has no declaration in the base layout folder; this can lead to crashes when the resource is queried in a configuration that does not match this qualifier.详情:...

    报错:👇👇
    The layout "activity_main" in layout has no declaration in the base layout folder; this can lead to crashes when the resource is queried in a configuration that does not match this qualifier.
    详情:
    If a resource is only defined in folders with qualifiers like -land or -en, and there is no default declaration in the base folder (layout or values etc), then the app will crash if that resource is accessed on a device where the device is in a configuration missing the given qualifier.  As a special case, drawables do not have to be specified in the base folder; if there is a match in a density folder (such as drawable-mdpi) that image will be used and scaled. Note however that if you only specify a drawable in a folder like drawable-en-hdpi, the app will crash in non-English locales.  There may be scenarios where you have a resource, such as a -fr drawable, which is only referenced from some other resource with the same qualifiers (such as a -fr style), which itself has safe fallbacks. However, this still makes it possible for somebody to accidentally reference the drawable and crash, so it is safer to create a default dummy fallback in the base folder. Alternatively, you can suppress the issue by adding tools:ignore="MissingDefaultResource" on the element.  (This scenario frequently happens with string translations, where you might delete code and the corresponding resources, but forget to delete a translation. There is a dedicated issue id for that scenario, with the id ExtraTranslation.)  Issue id: MissingDefaultResource

    翻译:
    如果资源仅在具有-land或-en等限定符的文件夹中定义,并且基本文件夹(布局或值等)中没有默认声明,则如果在设备所在的设备上访问该资源,则应用程序将崩溃在配置中缺少给定的限定符。

    作为特殊情况,不必在基础文件夹中指定drawable;如果密度文件夹(例如drawable-mdpi)中存在匹配,则将使用和缩放图像。但请注意,如果您只在drawable-en-hdpi等文件夹中指定drawable,则应用程序将在非英语语言环境中崩溃。

    在某些情况下,您可能会拥有一个资源,例如-fr drawable,它仅从具有相同限定符的某些其他资源(例如-fr样式)引用,该资源本身具有安全回退。但是,这仍然可以让某人意外地引用drawable和crash,因此在基础文件夹中创建默认的虚拟回退更安全。或者,您可以通过在元素上添加工具:ignore =“MissingDefaultResource”来解决此问题。

    (这种情况经常发生在字符串翻译中,您可能会删除代码和相应的资源,但忘记删除翻译。该方案有一个专用的问题ID,ID为ExtraTranslation。)

    解决方法:👇👇👇
    添加           tools:ignore="MissingDefaultResource"

    评论区前辈说,重启即可。遇到相同问题的小伙伴可以试一下昂~

    不知道会不会有后遗症,后续若有解决方法来此编辑~望有大佬指示。

    展开全文
  • DC-DC PCB layout 指导

    万次阅读 多人点赞 2020-05-14 14:03:57
    DC-DC 的电路比 LDO 会复杂很多,噪声也更大,布局和 layout 要求更高,layout 的好坏直接影响 DC-DC 的性能,所以了解 DC-DC 的 layout 至关重要。 文章目录1. Bad layout2. 一般原则① 开关回路短② 单点接地3. ...
  • layoutlayout-land和layout-port的区别

    千次阅读 2016-09-27 10:56:24
    一般把UI 布局文件放在layout文件夹下,如果要支持橫屏,就会取同名的layout放在layout-land文件夹下。 -res/layout-land 横屏 -res/layout-port 竖屏 -res/layout 默认   还有layout-finger, layout-...
  • layout_marginLeft和layout_marginStart

    千次阅读 2016-03-11 10:50:18
    最近经常使用layout_marginStart,看有些源代码里经常同时使用layout_marginLeft和layout_marginStart。查了查解释,layout_marginStart是Android4.2新添加的参数,用来自动匹配从右向左写的语言(阿拉伯语等)。...
  • 报错信息:The layout in layout has no declaration in the base layout folder; this can lead to crashes when the resource is queried in a configuration that does not match this qualifier 位置:xml的根...
  • 详解 layout_marginTop 与 layout_marginBottom

    万次阅读 多人点赞 2016-11-07 16:30:54
    layout_marginTop,layout_marginBottom,layout_marginRight,layout_marginLeft 是 RelativeLayout 中的四种属性,今天在进行UI设计的时候,着实困扰了好久,索性做个总结。先上结论: layout_marginTop 指定该属性...
  • layout_marginStart和layout_marginEnd

    万次阅读 2017-05-09 16:02:54
    8.4.6 从右到左布局(RTL Layout) 从Android 4.2开始,Android SDK支持一种从右到左(RTL,Right-to-Left)UI布局的方式,尽管这种布局方式经常被使用在诸如阿拉伯语、希伯来语等环境中,中国用户很少使用。...
  • No layout manager attached; skipping layout

    千次阅读 2017-01-24 15:51:42
    当Logcat报错 No layout manager attached; skipping layout 我们就要在代码中看跟layout manager有关的部分 发现在MainActivity.java中只单纯创建了layoutManager这个对象,并没有用它,看颜色也...
  • 8.4.6  从右到左布局(RTL Layout) 从Android 4.2开始,Android SDK支持一种从右到左(RTL,Right-to-Left)UI布局的方式,尽管这种布局方式经常...
  • 日常报错:Caused by: android.view.InflateException: You must specifiy a layout in the include tag: 原因是:include导入layout时,layout属性前面不应该加android
  • android:layout_weight的真实含义

    万次阅读 多人点赞 2014-04-28 21:02:16
    之所以android:layout_weight会引起争议,是因为在设置该属性的同时,设置android:layout_width为wrap_content和match_parent会造成两种截然相反的效果。如下所示: android:layout_width="match_parent
  • layout_weight属性的用法和意义

    万次阅读 多人点赞 2019-05-07 10:01:02
    一直没理解在LinearLayout中的layout_weight属性的意义,使用的时候都是将子控件的layout_width或者layout_height设置为0,然后在设置layout_weight的权重值,以至于在被问到如果设置了layout_width为具体的值时对...
  • layout_centerHorizontal是相对于RelativeLayout的布局属性 如果设置为true,就将该控价设置在相对于父控件水平居中的位置layout_gravity针对LinearLayout的一种控件对齐方式,可以把值设置成下列值: center_...
  • layout_centerHorizontal 1、是RelativeLayout(相对布局)的属性 2、若设置为“true”,就将该控件设置在相对于父控件水平居中的位置   android:layout_centerHorizontal="true"  layout_gravity...
  • Android中layout-sw600dp、layout-w600dp和layout-h600dp的区别

    万次阅读 多人点赞 2016-03-24 21:59:01
    Android开发过程中,经常会遇到像layout-sw600dp, values-sw600dp这样的文件夹,以前没用到,不怎么关注,所以一直一知半解的。现在要用到了,才去了解他们的用法和区别。其实,他们和drawable-hdpi/ drawable-mdpi...
  • 【总结】layout_below与layout_alignBottom的天壤之别

    万次阅读 多人点赞 2013-11-13 17:06:26
    layout_below与layout_alignBottom的天壤之别
  • 出现这个的原因是在下面的layout前面添加了android:
  • unity之Layout Group居中显示

    千次阅读 2020-04-09 20:24:17
    推荐阅读:  我的CSDN  我的博客园 ...首先介绍一下Layout Group,unity的LayoutGroup分为三种, Horizontal Layout Group(水平布局) Vertical Layout Group(垂直布局) Grid Layout Group...
  • 做出来的效果都是一样的。老版本API中支持layout_toRightOf,新版本API中建议使用layout_toEndOf,为了兼顾新老版本,最好两个要同时使用。
  • 1 android:layout_toLeftOf 2 android:layout_toRightOf 3 android:layout_above 4 android:layout_below 也就是说,以其他的组件为参照来确定组件的位置,属性的值应当是其它组件的id号,如 android:lay
  • 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=...
  • Vertical Layout 就是水平布局,相当于叠砖块一样 一层一层的安放其他的控件 Horizontal Layout 就是垂直布局,相当于一列一列的安放其他控件 当然各个布局中可以嵌套其他布局 1、在QTCreator 中的设置 2、运行...
  • 转载请注明博客地址。 最近看博客看到有关于RelativeLayout布局的解释,有的解释很多是错误的。...(会对所有的对其方式解释,且主要讨论layout_alignleft layout_toleftof区别) android:layout_above
  • antd-layout布局

    万次阅读 2019-02-19 16:59:40
    nz-layout:布局容器,其下可嵌套 nz-headernz-sider nz-content nz-footer 或 nz-layout 本身,可以放在任何父容器中。 nz-header:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在 nz-layout 中。 nz-sider...
  • Vertical Layout Group 垂直布局 游戏物体层级如图: 初始效果如图: 为Image添加组件Vertical Layout Group: 效果为: Padding 填充 控制上下左右间距 Spacing 间距 子物体之间间距 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,154,802
精华内容 461,920
关键字:

layout