tips:因为本人刚开始对一些知识点有点晦涩，需要结合实际生活抽象的去举例子，考虑到会有人跟我有同样的想法以及本着教学相长的理念，我写了这个文章，有的知识点是我从资料上借鉴来的，如果大家有新的还请一起分享哈，我会更新出来的，有些形容的不太贴切，但也能帮助理解。欢迎大家来指出错误，我喜欢被批评哈哈
所有的例子都仅供参考！！！！！
1、什么是线性布局？
例子：我们在书店的时候看到书籍按照分类进行线性排列，这样可以方便读者快速找到自己感兴趣的书籍
答案：线性布局（LinearLayout）是开发中最常用的布局，通过线性布局Row和Column构建。Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局
2、线性布局的对齐方式？
例子：例子同上，选择对齐方式可根据设计需求和美学考量。
答案：主轴对齐 ：属性：justifyContent()
交叉轴对齐：属性：alignItems()
3、什么是弹性布局？
例子：在一个客厅中，如果只采用固定布局，可能会导致家具摆放不合适。而采用弹性布局，就可以根据情况调整家具，通过设置wrap属性可以将没地方放的家具进行多行排列，以此来摆放的更好看
答案：弹性布局分为单行布局和多行布局。默认情况下，Flex容器中的子元素都排在一条线（又称：“轴线”）上。子元素尺寸总和大于Flex容器尺寸时，子元素尺寸会自动挤压。
wrap 属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局时，通过交叉轴方式，确认新行排列方向
4、绝对定位和相对定位的区别？
例子：绝对定位可以应用于家具的摆放，比如在客厅中放置沙发和茶几，如果沙发和茶几采用了绝对定位，那么它们的位置就是固定的，不会因为其他家具的移动而改变；
相对定位可以应用于服装搭配，比如在选择衣服时，如果一件衣服被设置为相对定位，那么它就根据其他衣服的位置进行调整，以达到更好的搭配效果。
答案：绝对定位：position，相对父组件左上角进行偏移，不占位置
相对定位：offset，相对自身左上角进行偏移，占位置
5、什么是层叠布局（堆叠）？
例子：层叠布局就像是一个人睡觉的时候盖了一层层的被子，有需求的时候，可以将被子放在别处 ————来自柴老师
答案：层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
通过alignContent来设置子组件的位置
6、Swiper容器组件？
例子：想象一下，你在一家图书馆的展示台上，有一个装满书籍的滑动抽屉。当你想要查看抽屉里的书籍时，可以左右滑动抽屉，逐个查看每本书的封面和标题。这个滑动抽屉就像是ArkUI中的Swiper容器组件，而每本书则相当于Swiper容器中的一个子元素。
答案：Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示
Swiper(){
//轮播内容
//要设置尺寸，撑开swiper
}
//设置尺寸（内容拉伸，优先级高）
.width('100%')
.height('100%')7、@Extend、@Styles、@Builder区别？
例子：@Extend（扩展）就像在生活中给一件物品添加新的功能或特性一样，@Extend可以让我们在不改变原有组件结构的基础上增加新功能；
@Styles（样式）在我们的购物应用中，为了提升用户体验，我们需要对商品卡片的样式进行统一设定。比如，商品图片应该居中显示，文字颜色应该为黑色，背景色应该为白色等等。这时，我们可以使用@Styles装饰器来定义这些样式规则；
@Builder（构建）就像在生活中我们根据设计图纸建造房子一样，@Builder可以根据我们定义好的组件样式和功能来构建具体的组件实例。
答案：
| 名称 | 适合 | 参数 |
| @Styles | 抽取公共样式、事件 | 不可以传递参数 |
| @Extend | 扩展特定组件、样式、事件 | 可以传递参数 |
| @Builder | 抽取结构、样式、事件 | 可以传递参数 |
8、网格布局 Grid/GridItem?
例子：网格布局：假设我们正在设计一个相册应用。在这个应用中，我们需要展示用户的照片集。为了更好地组织这些照片，我们可以使用网格布局(Grid)。就像在生活中我们将书本、文件等物品整齐地排列在一个个架子上一样，Grid可以帮助我们在界面上创建一个由多个单元格组成的网格结构，每个单元格都可以放置一张图片；
网格项(GridItem)：在我们的相册应用中，每张照片都是一个独立的元素，需要放在网格中的某个单元格内。这时，我们可以使用网格项(GridItem)来定义每个照片的显示位置和大小。就像在生活中我们把物品放入货架上的一个个小格子中一样，GridItem可以帮助我们指定每个照片应该占据哪个单元格以及它的尺寸。
答案：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
Grid(){
GridItem(){
//展示的内容放在这里 只能写一个子组件
}
GridItem(){
//展示的内容放在这里 只能写一个子组件
}
}9、容器组件Scroll？
例子：在一个新闻APP中，我们可以看到很多新闻标题和摘要，它们被放在一个可以滚动的区域里。当我们向下滚动时，新的新闻标题和摘要就会出现在我们的视野中。这就是Scroll容器组件的作用，它提供了一个可以滚动的视图，使得我们可以在有限的屏幕空间内展示更多的内容。
答案：可滚动的容器组件，当子组件的布局尺寸超过Scroll的尺寸时，内容可以滚动。
Scroll(){
//只支持一个子组件
Column(){
//内容放在内部
//尺寸超过Scroll即可滚动
}
}
.width('100%')
.height(200)两个常用方式和一个事件
//scrollEdge 返回顶部或底部
this.scroller.scrollEdge(Edge.Top)
this.scroller.scrollEdge(Edge.Bottom)
//currentOffset() 获取页面滚动的距离
this.scroller.currentOffset().yOffset //y轴滚动距离
this.scroller.currentOffset().xOffset //x轴滚动距离
//滚动事件 页面滚动时触发
onScroll(()=>{})
10、容器组件Tabs？
例子：我们可以将Tabs想象成一个文件夹，这个文件夹里有多个标签页，每个标签页代表一种分类或者一组相关的数据。在音乐播放器应用中，我们可以使用Tabs来组织不同的音乐类型，如流行、摇滚、古典等。用户可以通过点击不同的标签来切换他们想听的音乐类型。在这种情况下，每个标签就是一个容器，它包含了属于该类型的所有的音乐信息。
答案：通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
@Entry
@Component
struct Index{
build(){
Tabs(){
//顶级容器
TabContent(){
//内容区域：只能有一个子组件
Text('首页内容')
}
.tabBar('首页') //导航栏
}
}
}11、Badge组件？
例子：在社交应用中，如果有人给我们发送了新的消息，我们可以在消息图标旁边添加一个Badge，显示新消息的数量。这就像是在门上挂了一个标签，告诉我们有客人来访。
答案：以附加在单个组件上用于信息标记(气泡)的容器组件。
Badge({
count:0, //0不显示 大于0显示
value:'0' //设置字符串 可以是数字 会都显示
style:{}
}),{
//单个子元素
}12、如何设置组件的垂直水平居中？
例子：我们设计一个界面，中心位置通常会放置重要的内容或者操作按钮。我们可以将这些重要的组件设置在屏幕的中心位置，使得用户更容易注意到它们。
答案：
Row(){
Text('垂直水平居中')
.width(100)
.height(50)
.backgroundColor(Color.Orange)
//方式1
.position({x:'50%',y:'50%'}) //相对于父容器
.translate({x:'-50%',y:'-50%'}) //相对于自身
}
.width(300)
.height(200)
.backgroundColor(Color.Pink)
.margin(50)
//方式二
.justifyContent(FlexAlign.Center)13、页面布局上的性能和内存上的注意事项
例子（这里不举例子，只解释）：
1、 使用row/column+layoutweight的布局结构更简单，计算量更小，因此渲染速度更快。
- flex容器需要进行更多的计算来确定子元素的大小和位置，这会增加CPU负担，降低性能。
2、 ①设置容器的宽高：如果不设置容器的宽高，每次滚动时都需要重新计算整个列表的高度，这会消耗大量的计算资源，并可能导致滚动效果不流畅。因此，为scroll中的list/grid容器设置一个固定的宽高，可以避免不必要的计算，并提高滚动性能。
②使用lazyforeach渲染item：当数组数据很大时，一次性渲染所有的item可能会消耗大量的内存和计算资源。lazyforeach允许你只渲染当前视口内的item，这样可以大大减少内存使用，并提高渲染速度。只有当用户滚动到一个新的区域时，才会渲染新的item，这可以提供更好的用户体验。
3、使用visibility属性来隐藏一个组件时，该组件仍然存在于DOM树中，并且其样式和事件处理程序仍然被计算和应用。这意味着即使一个组件是不可见的，它仍然会消耗计算资源。相反，使用if语句来控制组件的显隐，当条件为假时，组件将不会被添加到DOM树中，从而避免了不必要的计算和渲染工作。
4、当用户滚动一个list/grid容器时，新的item需要被渲染出来。如果每次滚动都需要重新计算和渲染所有的item，那么这会消耗大量的计算资源，并可能导致滚动效果不流畅。
- 使用cachecount属性，可以在滚动过程中预先渲染一些额外的item，这样当用户滚动到这些item时，它们就已经准备好了，从而提高了滚动性能。
答案：1、使用row/column+layoutweight代替flex容器使用
2、scroll嵌套list/grid容器时，要设置容器的宽高，数组数据渲染尽量使用lazyforeach渲染item
3、组件的显隐设置，要使用if语句来判断，避免使用visibility
4、list/grid容器要根据具体场景来使用cachecount，避免卡顿
14、ArkUI的两大开发范式是什么，区别是什么？
例子（这里不举例子，只解释）：
1. 类Web开发范式：这种开发范式主要是借鉴了Web开发中的思想和技术。在Web开发中，开发者需要使用HTML、CSS和JavaScript等技术来构建网页。其中，HTML用于描述页面的结构，CSS用于定义页面的样式，JavaScript用于处理用户的交互事件。类Web开发范式就是将这种思想应用到其他类型的开发中，比如移动应用的开发。这种方式的优点是可以利用现有的Web开发技术和工具，降低了学习成本。但是，这种方式也存在一些问题，比如性能可能不如原生的应用，而且对于一些复杂的用户交互可能难以处理。
2. 声明式开发范式：这种开发范式强调的是"做什么"，而不是"怎么做"。开发者只需要描述他们想要的结果，而不必关心具体的实现细节。例如，在ArkUI中，开发者可以通过XML或JSON格式的文件来描述界面的布局和样式，然后由ArkUI框架自动将这些描述转换为实际的界面。这种方式的优点是简化了开发过程，提高了开发效率。但是，这种方式也有其局限性，比如对于一些复杂的逻辑和交互，可能需要编写更多的代码才能实现。
答案：类Web开发范式：采用经典的HTML、CSS、JavaScript三段式开发方式，就是使用HML标签文件搭建布局、使用CSS描述布局、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟UI框架应用。
声明式开发范式：采用基于TypeScript声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制能力。
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
