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