聊聊flutter的UI布局
2024-09-03 11:47:05
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
最新文章
- 数据分布转换：非正态 -> 正态
- SQL 查询两个字段相同表的不同记录
- 在ubuntu 16.04系统环境中搭建NAS（samba/iscsi/nfs）
- MVC VS2012 Code First 数据库迁移教程
- 决策树Decision Tree 及实现
- 深入浅出话VC++(1)——Windows程序内部运行机制
- spring的下载地址（转）
- CodeIgniter 框架---学习笔记
- Selenium 使用方法小结
- springmvc中url-pattern的大坑
- css3 transform 变形
- 团队作业8——第二次项目冲刺（Beta阶段）第三天
- vbs编写一个函数，将1001到1050（50串数字）读入test.txt文件。每串数字占一行，不是覆盖。
- 2、SQL UNION 和 UNION ALL 操作符
- mysql binglog server的设置方法【原创】
- 05：ModelForm 数据验证 & 生成html & 数据库操作
- Mybatis 测试延迟加载
- c++11多线程学习笔记之一 thread基础使用
- JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各种使用区别
- gulp 在 angular 项目中的使用