容器组件
1.线性布局容器组件
线性布局（LinearLayout）是开发中最常用的布局，通过线性容器 Row 和 Column 构建。 Column容器内子元素按照垂直方向排列。 Row容器内子元素按照水平方向排列。 根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。
1.1 Column
- 效果+场景
可以让其内部的一级组件垂直排列
- 作用
可以包含子组件。 可以让其内部的一级组件垂直排列
- 基本语法
Column()
Column(value?:{space?: number | string })
Column(){内容}
Column(){
text（'1'）
text（'2'）
text（'3'）
text（'4'）
}
- 注意点
-
可以通过 space 属性设置布局主方向方向上子元素的间距，使各子元素在布局主方向上有等间距效果。
-
除支持通用属性外，还支持以下属性：
alignItems(value: HorizontalAlign) ------设置子组件在水平方向上的对齐格式。 justifyContent(value: FlexAlign) ----设置子组件在垂直方向上的对齐格式。
1.2 Row
- 效果+场景
可以让内部的一级组件水平排列
- 作用
包含子组件， 可以让内部的一级组件水平排列
- 基本语法
Row(){}
- 注意点
-
可以通过 space 属性设置布局主方向方向上子元素的间距，使各子元素在布局主方向上有等间距效果。
-
除支持通用属性外，还支持以下属性：
alignItems(value: HorizontalAlign) ------设置子组件在垂直方向上的对齐格式。 justifyContent(value: FlexAlign) ----设置子组件在水平方向上的对齐格式。
2. 弹性布局容器组件（Flex）
弹性布局分为单行布局和多行布局。默认情况下，Flex 容器中的子元素都排在一条线（又称“轴线”）上。子元素尺寸总和大于 Flex 容器尺寸时，子元素尺寸会自动挤压。
wrap 属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex 是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。
2.1 Flex
- 效果+场景
- 作用
在单行显示所有的子元素，子元素总宽度如果超过了 容器宽度会被挤压显示。 可以修改显示模式为多行 Flex({wrap:FlexWrap.Wrap}){} ，会自动计算一行显示几个元素，如果不够就自动换行
- 基本语法
* Flex({wrap:FlexWrap.Wrap}){}
- 注意点
缺点：由于要不停的计算宽度，所以带来一定的性能损失
结论： 不要轻易使用Flex布局 ✨✨当一行不能确定显示元素个数的时候，才使用它
3.堆叠容器
堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。
3.1 Stack
- 效果+场景
层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。
- 作用
层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过 Stack 容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
- 基本语法
*Stack(){可以写任意组件,Row,Column,Flex,Scroll,Image,Text,Button....}
默认行为：所有内部元素默认是按照中心来进行层叠显示的（对齐方式）
2．改变一级组件的对齐方式
*我们可以通过Stack({aligncontent:Alignment.方位})来改变
*内部所有的一级组件的对齐方式(影响所有的一级组件)
- 注意的坑点 内部元素默认是按照中心来进行层叠显示的（对齐方式）
4.可滚动的容器组件
可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。
4.1 Scroll
- 效果+场景
-
作用
-
基本语法
Scroll(scroller?: Scroller)
- 注意点 除支持通用属性和滚动组件通用属性外，还支持以下属性: 1.scrollable(value: ScrollDirection) -------设置滚动方向。 2.scrollBar(barState: BarState)----- 设置滚动条状态。如果容器组件无法滚动，则滚动条不显示。如果容器组件的子组件大小为无穷大，则滚动条不支持拖动和伴随滚动。
Scroll可以增加滚动条的特点：
- Scroll 高度要确定
- 当Scroll里面的内容超出了Scroll本身的高度，就自动增加滚动条
