2022-03-07 flutter 常用组件以及布局

根据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、左侧抽屉、右下部按钮