1.1 什么是线性布局?
线性布局是开发当中的常用布局,通过线性容器row和column构建。cloumn容器里面的子元素是垂直方向排列,row容器里面的子元素是水平方向排列。根据不同的排列方式以及页面整体布局方式,可以通过row和cloumn来构建页面
1.2 线性布局的对齐方式
在主轴方向 通过属性justifyContent()属性来设置,里面是枚举类型 FlexAlign
交叉轴方向通过alignItems()
水平方向枚举类型:HorizontalAlign
垂直方向枚举类型: VerticalAlign
start ————–首端对齐
center————-居中对齐
end —————-最后对齐
Spacebetween ——–两端对齐,子元素之间的间距相等(两侧元素到两侧没有距离)
SpaceAround ————- 两侧元素到两侧的距离是中间元素间距的一半
SpaceEvenly ————–元素之间间距相等,等于两侧元素到两侧的距离
1.3 什么是弹性布局
弹性布局是分为单行布局和多行布局,默认情况下,容器内子元素会在一条线上,当子元素的尺寸和大于flex尺寸的时候,容器子元素会自动挤压
可以通过wrap属性控制flex容器内的子元素是单行布局还是多行布局
在多行布局的时候,通过交叉轴方向,布局新行的排列方向
1.4 相对定位和绝对定位
绝对定位: position 相对父组件左上角为参照进行位移 不占位置
相对定位: offset 相对于自身左上角偏移 占位置
1.5 什么是层叠布局
层叠布局是通过stack容器来实现位置的固定定位和层叠,容器内的子元素依次入栈,后面的元素总是会覆盖前面的子元素,子元素可以叠加,也可以设置位置,通过alignContent来设置子元素的位置
1.6 什么是swiper容器组件
swiper组件提供了滑动轮播显示的能力。它本身是一个容器组件,当设置多个子组件之后,可以对这些子组件进行轮播显示。
1.7 @Extend @Styles @Builder区别
@Extend 是对特定组件样式,事件进行抽取,且可以提供传参能力
@Styles 是对公共事件,样式进行抽取,且没有传参数的能力
@Builder功能最为强大,可以对结构,样式,组件进行抽取 且有传参数的能力
1.8 网格布局是什么
网格容器是由行和列分割的单元格所组成,通过项目所在的单元格做出各种各样的布局
基本使用 Grid(){
里面有GridItem(){
但是GridItem里面只能有一个子容器
}
}
1.9 容器组件Scroll
容器组件Scroll 是可滚动的组件,当组件内容大于Scroll容器的时候,内容可以滚动,且里面只支持一个子组件
两个常用的方法:
//返回到顶部或者底部
this.scroller.scrollEdge(Edge.top)
this.scroller.scrollEdge(Edge.bottom)
//获取页面滚动距离
this.scroller.currentOffset().yOffset
this.scroller.currentOffset().xOffset
//滚动事件,页面滚动的时候触发
onScroll(()=>{
})
1.10 容器组件tabs
通过页签来进行内容视图的切换,每个页签都对应一个内容视图
tabs(){ 顶级容器
TabContent(){
//只能有一个子组件
页面内容
}.tabBar(页签) 导航栏
TabContent(){
//只能有一个子组件
页面内容
}.tabBar(页签) 导航栏
}
1.11 Badge
以附加在单个组件上用于标记信息的组件
Badge(
{
属性
value: 99//0不显示
count: ’1‘ 字符串,数字,都可以显示
style:{
样式
}
}
){
所要附加的组件
}
1.12 如何设置组件垂直水平居中
//第一种:
先用position({
x:'50%',
y:'50%'
}) 这个定位,绝对定位是相对于父组件左上角为参照便宜
这个时候,组件的左上角就在父组件中心
translate({
x:'-50%'
y:'-50%'
})
再用平移 相对于自身宽高,向左向下平移一般,组件就到中心了
//第二种
在主轴方向 justifycontent(FlexAlign。center) //来实现
交叉轴上用alignItems()HorizontalAlign
:VerticalAlign .center
1.13 页面布局上的性能和性能注意事项
1.尽量使用row/Column layoutWeight 来代替flex容器的使用
flex容器非常消耗内存,避免容器多层嵌套,嵌套容器时,每个容器实例都会在其子对象上运行度量和缩放算法
2.scroll 嵌套list和grid容器的时候,要设置容器的宽高,而且用数组渲染数据的时候,使用lazyForEach 渲染数据
LazyForEach从提供的数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach,框架会根据滚动容器可视区域按需创建组件,当组件滑出可视区域外时,框架会进行组件销毁回收以降低内存占用。提升用户体验
但是如果数据量较少的时候,可以使用ForEach(一次性渲染所有组件)来渲染
3.组件的显隐设置尽量用if来判断,避免使用visibility
条件渲染应用场景
●在应用冷启动阶段,应用加载绘制首页时,如果组件初始不需要显示,建议使用条件渲染替代显隐控制,以减少渲染时间,加快启动速度。 ●如果组件不会较频繁地在显示和隐藏间切换,或者大部分时间不需要显示,建议使用条件渲染替代显隐控制,以减少界面复杂度、减少嵌套层次,提升性能。 ●如果被控制的组件所占内存庞大,开发者优先考虑内存时,建议使用条件渲染替代显隐控制,以即时销毁不需要显示的组件,节省内存。 ●如果组件子树结构比较复杂,且反复切换条件渲染的控制分支,建议使用条件渲染配合组件复用机制,提升应用性能。
visibility渲染应用场景
如果组件频繁地在显示和隐藏间切换时,建议使用显隐控制替代条件渲染,以避免组件的频繁创建与销毁,提升性能。
需要占位是需要用这个
4.list和grid容器应该根据场景来使用cachecount,避免卡顿
虽然需要尽量避免一次性加载全部列表数据项,但合理的预先缓存当前屏幕上下几页的列表项内容会给用户带来更好的体验,例如通过缓存避免“滑动白块”现象。
LazyForEach懒加载可以通过设置cachedCount属性来指定缓存数量。在设置cachedCount后,除屏幕内显示的ListItem组件外,还会预先将屏幕可视区外指定数量的列表项数据缓存起来。
当网络请求加载的数据量较少且少量图片,可以把缓存数量调高,但是数据量为一些大图或者视频之类的,就需要减少内存的消耗,减少缓存的数量
1.14 声明式开发范式
声明式开发范式– 基于TypeScript声明式UI拓展来的ArkTS语言,从组件,动画,状态管理三个维度来提供UI绘制能力
类Web开发范式 采用经典的html css JavaScript 三段式开发方式。