zoukankan      html  css  js  c++  java
  • 聊聊flutter的UI布局

    UI布局多半是套路,熟悉套路的规则。

    Flutter的UI布局也有一套规则

    center

    center可以让任何元素在屏幕中居中,既是水平居中又是垂直居中,如果想让元素从上而下排列要怎么办呢?那就得使用column来配合

    container

    container是个容器,可以包在一个元素的外面,container大多数可以做一个圆角边框,或者设一个统一的背景色,container默认随元素的大小而变化。所以container是一个很吝啬的元素,另外一些元素想和其他元素保持一定的间距,可以借用container的margin属性来设置

    row column 

    作为横向或者竖向的布局,column最大的宽度有子元素的最大宽度决定的,换句话说,如果column的子元素设为了居中,其它子元素根据column的宽度居中,因此column 默认处在屏幕的最左边,如果让column居中,需要使用center来配合, row 布局元素的时候,如果元素的长度比如text超出了一行的长度,并不会自动换行,必须配合expanded,但是column是会自动换行的,这个是它们的一点异同点,需要注意

    expanded

    顾名思义是膨胀扩展的意思,只能用在具有flex布局属性的容器控件里,譬如column,row

    比如row里有三个元素,我想让某一个元素占用所有的剩余行空间,可以在该元素外面套上expanded

  • 相关阅读:
    单据的多个状态字段
    Win7 如何阻止程序联网
    强制关机.bat
    Delphi Class of
    坐标转换 GetCursorPos与转换
    Delphi 的RTTI机制浅探-2
    Delphi 的RTTI机制浅探-1
    Delphi 的RTTI机制-3
    Delphi 的RTTI机制-2
    Delphi 的RTTI机制-1
  • 原文地址:https://www.cnblogs.com/njcxwz/p/10050205.html
Copyright © 2011-2022 走看看