zoukankan      html  css  js  c++  java
  • 三大Flex布局用法(转载)

    Flex布局基础

    对于Flex 初学者,在Hello World之后,Flex布局便是下一站学习要的要义。若是从传统的Html转变而来,总希望找到类似于Div/Table/UL等之类的控件,也希望在 Flex中可以像Dreamweaver一样可以拖拽控件;而如果是从Windows Application程序转变而来,则可能更喜欢Absolute布局,让控件散落于页面之上,通过x/y控制其坐标。这种做法让Html设计师觉得可 笑,但我见过有人确实用VS这么做过。

    喜欢Div的朋友,可能觉得Box很亲切;喜欢用Table的设计师,对不起,Flex没有Table,Grid虽与之极像,但不宜用来布 局;Application程序员也不要图行事,使用Absolute布局,这种布局不宜开发Web应用,如果只是开发桌面版则无关紧要。

    本节写了三个Demo:

      

    ◆Absolute布局

    ◆Hbox布局

    ◆VBox布局(与前者统称Box布局)

    如果开发AIR程序或者桌面应用,可以选择Absolute布局;但如果开发Web应用,推荐学习、研究Box布局。右击可以查看源码。

    一、Flex布局之Absolute

    用Flex新建Application时,最下面有一个布局属性选项:Vertical,Horizontal,Absolute。意思如单词。若 选择Absolute,则Application的子控件依据其{x,y}坐标依靠。但不影响第二代子控件,即,如果放一个HBox到该 Application中,HBox中的控件则水平排列。Horizontal与Vertical相当于把Application做为一个水平或竖向的盒 子(Box),对子、孙控件的影响关系与Absolute类似。

    查看Absolute,不难发现,可视区域的宽度是一定的,无论在何种分辨率下,何种浏览器宽度。但在Web应用中,我们不希望出现这样的效果。相 反,我们可能希望控件可以按照百分比自动调整位置。只此一条,开发Web应用,便不建议使用Absolute布局。由此便产生了方便、简单、易用的Box 布局。

    二、Flex布局之Hbox

    HBox让子控件按水平方向自动排列,居右、居左或居中都可以。

    查看Hbox,控件与前者没有增减,同样的控件。但它可以自适应浏览器宽度。文章的标题栏部分用了一个HBox,其包涵三个子控 件:Label,Spacer与LinkButton.Spacer的宽度设为100%,这样无论Label无多少字符,多宽,都可以把 LinkButton撑到最右边。同样,也可以把它用在VBox中,则设置其高为100%。Spacer在Box布局中非常实用。
    细心的朋友不难发现,这个Application的layout属性是Vertical,整个App相当于一个VBox。最下面的评论文本框与按纽也在一个HBox之内。

    三、Flex布局之VBox

    VBox让子控件在竖直方向上排列。top,bottom or center。

    查看VBox,这个App的layout是Horiazontal,相当于一个HBox。一级控件是两个VBox,一左一右。左边与前面的HBox 对应的部分类似。右边用Panel与TitleWindow,还有Grid,Tile。Panel与TitleWindow都具有layout属性,可以 在其内部放置任何子控件,待遇与Application同。值得一提的是Tile,它可让子控件流动延伸,先在x轴上排行,满了之后再换行。 TileList与其类似。

    Grid酷似html中的Table,但差别很大,也不适合做布局用。实际应用中,也常用Tile或TileList代替。
    Box布局可以满足基本的项目应用,但有一些问题。譬如,文章内容要滚动显示,能不能像Html那样实现流布局?答案是可以的。Box布局只是基本的布局方法,并没有发挥Flex的长处与优势。关于State与流布局在稍后。
    在商业项目开发中,Application99%都使用absolute布局,中间所用的容器间有box,tile或其它布局。

  • 相关阅读:
    编译asp.net core源代码,并搭建基于源代码的测试环境
    sql server 按照in里面的顺序进行查询
    j-roadflow-java工作流修改抄送任务已阅知表单为只读
    roadflow工作流用nginx做负载均衡的配置文件
    vue ie 报错SCRIPT5022: SecurityError sockjs.js (1683,3)
    RoadFlow Asp.net Core Vue工作流引擎增加对PostgreSQL数据库的支持
    点,线,面
    .NET 5应用程序中的跨域请求
    物料齐套计算
    高级计划AP(Advance Planning)是如何运作的 (转载)
  • 原文地址:https://www.cnblogs.com/dingyufenglian/p/4892458.html
Copyright © 2011-2022 走看看