根据css的布局习惯大致分为：
线性布局：横向使用row，纵向使用Colemn。
弹性盒子：flex和Expanded、Container搭配使用，row和Colemn本质也可以实现弹性盒子的效果
绝对定位：stack 和 positationed stack必须由宽度和高度
相对定位：Align：调整子组件在父组件中的位置，适用于单个组件（待验证）
wrap：流式布局，一行显示不下 显示第二行，spacing：横向间隔，runSpacing：竖向间隔
Container：一个盒子，类似于div可以设置背景色、边框、阴影、内外边距等。
center：集成自Align，居中
Padding：加留白 类似于 padding
Expanded： 它会填充尚未被其他子项占用的的剩余可用空间，一半搭配flex、row、Colemn使用
注意：布局时，子组件会受到父组件约束！当给子组件添加css不生效时，一定是被父组件所限制了！
限制类容器：主要是用于限制子元素，sizebox：限制固定的宽高，ConstrainedBox:可以限制子元素的最大最小高，最大最小宽（minWidth、maxWidth），也可以填满整个容器（expand），了解即可，开发推荐使用Container的属性（constraints）进行限制
装饰类容器：组件是DecoratedBox，可以设置圆角，渐变，阴影等。不过和限制类容器一样，了解即可，开发推荐使用Container的属性（decoration）进行装饰
文本以及图片组件：
Text
文本组件，要注意它的height属性指定的是行高，不是一个绝对值，而是系数，具体的行高通过 fontsize * height 计算出来，如果要实现一个文本有多个样式的字体时，需要借助于 TestSpan组件，具体用法：
Text.rich( TextSpan( children: [
TextSpan( text: "Home: " ), TextSpan( text: "https://flutterchina.club")
]))
注意：row + image + text布局时，text组件必须给height！！！！否则会出现汉字偏下的问题！
5：Image
图片组件分为从网络获取与本地获取两种写法，从网络获取
Image(
image: NetworkImage( "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"), width: 100.0,
)
从本地获取：
Image(
image:AssetImage("images/avatar.png"),width:100.0
);
1：WillPopScope：
防止用户误触导致APP退出，只有在1秒内点击两次返回，才会退出，使用方法直接套在每个页面的最外部即可。
2：SafeArea
安全区域组件
3：transform
转换，与css差不多，位置不会变，只是对内容的转换
4：SingleChildScrollView
单组件滚动
5：ListView
列表滚动
6：GridView
九宫格
7：AspecRatio
约束子组件的宽高比
8：Tabbar、tabview
顶部tab，顶部tab对应的页面使用tabview包裹起来
9：滚动类组件
SingleChildScrollView：只用于组件的内容不会超过屏幕太多时使用，因为整个组件不会按需加载，如果超出很多，需要使用ListView。
10：Scaffold
页面骨架：Scaffold 可以实现的样式如下：主要包含顶部header、底部tab、左侧抽屉、右下部按钮
网友评论