Flutter常见UI组件使用

// listView中的View可以不一样 可以直接往里面放入多个不同的View
Now we can use the ai give we 90% the widget we want。The old era is over！

flutter页面组件的设计思想：
包裹！包裹！包裹！
和Android 很不一样的，Android 是内嵌，而flutter是外包。
你想要点击事件，想要处理各种手势，外包一个gesturelistener, 而Android就是传递监听器到内部。
你想要实现这个布局效果，不是去设置xx widget的属性，而是给包裹上一个相应的布局组件，比如要设置padding，包裹一个padding组件，要改变位置，包裹上一个postioned组件
等等。

Scaffold

Scaffold 翻译过来就是脚手架的意思，就是一个基础界面，打包了一个界面需要的的常见元素，比如标题栏，FloatButton 抽屉菜单，底部工具栏等
const Scaffold({
Key key,
this.appBar, // 标题栏
this.body, // 用于显示当前界面主要内容的Widget
this.floatingActionButton, // 一个悬浮在body上的按钮，默认显示在右下角
this.floatingActionButtonLocation, // 用于设置floatingActionButton显示的位置
this.floatingActionButtonAnimator, // floatingActionButton移动到一个新的位置时的动画
this.persistentFooterButtons, // 多状态按钮
this.drawer, // 左侧的抽屉菜单
this.endDrawer, // 右’侧的抽屉菜单
this.bottomNavigationBar,// 底部导航栏。
this.bottomSheet, // 显示在底部的工具栏
this.backgroundColor,// 内容的背景颜色
this.resizeToAvoidBottomPadding = true, // 控制界面内容 body 是否重新布局来避免底部被覆盖，比如当键盘显示的时候，重新布局避免被键盘盖住内容。
this.primary = true,// Scaffold是否显示在页面的顶部
})

Scaffold可以嵌套，并不是只能放在整个页面才行。

UI组件

flutter的布局体系

这个文章比较好
https://juejin.cn/post/6919653632468221966
参考链接
https://blog.csdn.net/hjjdehao/article/details/126012159

界面布局体系主要分为两大类：直接布局类组件和装饰包裹组件，我们布局的时候基本都是相互嵌套的
装饰包裹组件可以实现背景，边距（pad margin），边框（什么圆角之类），大小控制，对齐方式，旋转缩放等变换等等的控制。

1、布局类组件

线性布局组件
弹性布局组件
流式布局组件
叠加布局组件

2、装饰包裹组件
Container
SizedBox
宽高低：AspectRatio
FittedBox&FractionallySizedBox&ContainedBox
Expanded、Flexible 和 Spacer

需要的组件可以从这里看

https://github.com/Solido/awesome-flutter

布局组件

线性布局

Flex ，就相当于Android 的linearLayout
指定方向之后就是row cloum 。
他俩继承自Flex，参数基本相同，能使用Flex的地方基本上都可以使用Row或Column
如果你知道主轴方向，使用Row或Column会方便一些。

弹性布局–线性权重布局

Expanded、Flexible、Spacer

弹性布局允许子组件按照一定比例来分配父容器空间。
通过线性布局 + Expanded、Flexible、Spacer等包裹控制来配合实现。
通过配置子布局的比例（权重）适配，可以实现让子组件在其主轴方向上展开并填充可用空间等效果。
Expanded继承于Flexible，不同之处是Expanded会强制填充剩余留白空间，而Flexible不会强制填充
Spacer 的本质也是 Expanded 的实现的，和Expanded的区别是：Expanded 可以设置子控件，而 Spacer 的子控件尺寸是0，因此Spacer适用于撑开 Row、Column、Flex 的子控件的空隙，用法如下

Row(
children: [
Container(
height: 30.0,
width: 48.0,
color: Colors.red,
),
Flexible(
flex: 1,
child: Container(
height: 30.0,
width: 88.0,
color: Colors.green,
),
),
],
),

Row(
children: [
Container(
height: 30.0,
width: 48.0,
color: Colors.red,
),
Expanded(
flex: 1,
child: Container(
height: 30.0,
width: 88.0,
color: Colors.green,
),
),
],
),

###flex

主轴（ MainAxis ） 和 交叉轴（ CrossAxis ）概念

一个非常重要的概念：主轴（ MainAxis ） 和 交叉轴（ CrossAxis ），主轴就是与组件布局方向一致的轴，交叉轴就是与主轴方向垂直的轴。
具体到 Row 组件，主轴 是水平方向，交叉轴 是垂直方向。
于是mainAxisAlignment 属性，此属性表示主轴方向的对齐方式，默认值为 start，表示从组件的开始处布局，此处的开始位置和 textDirection 属性有关，textDirection 表示文本的布局方向，其值包括 ltr（从左到右） 和 rtl（从右到左），当 textDirection = ltr 时，start 表示左侧，当 textDirection = rtl 时，start 表示右侧，

流式布局–线性布局自动换行

使用row的时候，一行内容过多，右边就会溢出部分报错。这是因为 Row 默认只有一行，如果超出屏幕不会折行。我们把超出屏幕显示范围会自动折行的布局称为流式布局。Flutter 中通过Wrap和Flow来支持流式布局，将上例中的 Row 换成 Wrap 后溢出部分则会自动折行。

层叠布局

层叠布局顾名思义就是，可以让widget叠加在一起。
就相当于FrameLayout了。
使用方法
Positioned组件
left、top 、right、 bottom分别代表离Stack左、上、右、底四边的距离，就等价于FrameLayout中的margin left，right，top ， bottom。width和height用于指定需要定位元素的宽度和高度。注意，Positioned的width、height 和其它地方的意义稍微有点区别，此处用于配合left、top 、right、 bottom来定位组件，举个例子，在水平方向时，你只能指定left、right、width三个属性中的两个，如指定left和width后，right会自动算出(left+width)，如果同时指定三个属性则会报错。
alignment：此参数决定如何去对齐没有定位（没有使用Positioned）或者部分定位掉子组件。所谓部分定位，在这里特指没有在某一个轴定位：left/right为横轴，top/bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。

装饰定位权重组件

这个就是通过包裹一个子组件，让子组件具有一些布局特性。不只是布局，子组件很多属性都通过包裹实现，包裹思想，这个Android的设计还是有很大不同的。Android是通过直接设置xxx给一个View实现需要的特性，比如点击监听。

Container

Container是flutter中广泛使用的容器类组件。
直接把容器这个名字给占用了，从名字可以看到基础重要性。
属性

alignment：child对齐的属性，可以设置居中、居左、居右、居上、居下等等。
padding：内边距。width和height包含padding值。
color：背景颜色。
decoration：设置装饰，比如边框、圆角、背景图片等。不能给Container同时设置decoration和color属性，如果要同时设置，给decoration设置color就可以。
foregroundDecoration，设置前景装饰。
width：宽度。
height：高度。
constraints：大小范围约束，constraints有四个属性：minWidth、minHeight、maxWidth、maxHeight。
margin: 外边距。
transform：变换效果，比如翻转、旋转、变形等。
child：子组件，可以不设置。

Container自身尺寸的调节分两种情况：

Container在没有子节点（children）的时候，会试图去变得足够大。除非constraints是unbounded限制，在这种情况下，Container会试图去变得足够小。
带子节点的Container，会根据子节点尺寸调节自身尺寸，但是Container构造器中如果包含了width、height以及constraints，则会按照构造器中的参数来进行尺寸的调节。

Decoration(装饰器)

decoration的属性很强大，可以支持背景图线性或者径向的渐变，边框，圆角，阴影等属性
Flutter的Decoration可以设置：背景色 背景图 边框 圆角 阴影 渐变色 的等属性，Decoration 是基类，它的子类有下面这些

BoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像
ShapeDecoration:实现四边分别指定颜色和宽度、底部线、矩形边色、圆形边色、体育场（竖向椭圆）、 角形（八边角）边色
FlutterLogoDecoration:Flutter图片
UnderlineTabindicator:下划线

SizedBox

SizedBox: 用来限制子组件的大小。

宽高比（AspectRatio）

AspectRatio 是固定宽高比的组件
Container(
height: 300,
width: 300,
color: Colors.blue,
alignment: Alignment.center,
child: AspectRatio(
aspectRatio: 2 / 1,
child: Container(color: Colors.red,),
),
)

FittedBox（缩放布局）

FittedBox 组件主要做两件事，缩放（Scale）和位置调整（Position）。
FittedBox 会在自己的尺寸范围内缩放并调整 child 的位置，使 child 适合其尺寸。FittedBox 和 Android 中的 ImageView 有些类似，将图片在其范围内按照规则进行缩放和位置调整。

Toast

https://github.com/ponnamkarthik/FlutterToast
OKToast