HarmonyOS 鸿蒙Next ArkTS超新手入门（四）——基础容器组件
HarmonyOS 鸿蒙Next ArkTS超新手入门（四）——基础容器组件 上次我们见到了text组件的基本情况，那么我们常用的组件还有哪些呢？在ArkUI中，我们常用的组件有这么几种：
- 基础组件，比如text、image、textinput、button等，负责组成我们页面中的各种部分。
- 容器组件，比如column、row、flex、list等，容器组件一般在基础组件的上一级，负责页面上各个组件的布局。
- 还有一些特定功能的组件，比如多媒体组件video，绘制组件cricle、line，画布组件canvas等。
上次我们看了基础组件中的text，这次我们主要说说容器组件，最常用的、最基础的有column容器（纵向排布），row组件（横向排布），还有stack组件（堆叠排布）。
横向和纵向排布这个很好理解，咱们就不多说了，stack堆叠排布要注意的是因为有层级关系，想要显示出来，从上到下，要有不一样的尺寸，否则视觉上会覆盖掉，看不到下方的组件。
如果只是一个简单的页面，这几个基本就够了，容器组件里面还可以套容器组件，比如一个column里面套三个row，每个row组件里面在套三个基础组件，这样可以形成一个3*3的格子，不过这样做就比较麻烦了，代码量上来了，每个组件还需要调整属性，才能保证形状大小不变，这时候我们就有了另一个可以选择的容器，gird容器组件。
Gird容器组件是用来做网格布局的，在gird容器中，我们有纵向和横向两个属性可以设置，分别是columnTemplate和rowTemplate，在设置好长款之后，我们设置好横向和纵向的格子数量就行，比如这样：
Grid（）
{
…………
}
.cloumnTemplate(1fr 1fr 1fr)
.rowTemlpate(1fr 1fr 1fr)这样我们就能制作一个3*3的网格了，1fr可以理解问，在所有分好的份里占1份，这里如果写【（1fr 2fr 1fr）】,那就是这里需要三个格子，一共分了4份的大小，第一个格子和第三个格子占的大小是1份，第二个格子占的大小是2份。
除此之外还有很多其他的容器组件，比如能够实现滚动视图的滚动容器Scroll容器，能够实现轮播效果的滑动容器Swiper容器，能够利用列表布局的List容器，这些我们后面提到再说。
更多关于HarmonyOS 鸿蒙Next ArkTS超新手入门（四）——基础容器组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，ArkTS基础容器组件主要包括Column、Row、Stack、List、Grid和Scroll等。Column用于垂直布局，子组件按照从上到下的顺序排列。Row用于水平布局，子组件按照从左到右的顺序排列。Stack用于层叠布局，子组件会按照添加顺序层叠显示。List用于列表布局，支持滚动显示大量数据。Grid用于网格布局，支持多行多列的排列。Scroll用于滚动布局，当内容超出容器大小时支持滚动查看。这些组件通过@Component装饰器定义，使用build方法构建UI结构。例如：
@Component
struct MyComponent {
build() {
Column() {
Text('Hello World')
.fontSize(30)
Row() {
Text('Left')
Text('Right')
}
Stack() {
Text('Bottom')
Text('Top')
}
}
}
}这些组件可以通过属性设置布局样式，如width、height、padding、margin等。ArkTS还支持通过@State、@Prop、@Link等装饰器管理组件状态，实现动态UI更新。
更多关于HarmonyOS 鸿蒙Next ArkTS超新手入门（四）——基础容器组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
