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绘制能力。