前言
根据研究机构Counterpoint Research发布的最新数据,2024年第一季度,鸿蒙OS份额由去年一季度的8%上涨至17%,iOS份额则从20%下降至16%。这意味着,华为鸿蒙OS在中国市场的份额超越苹果iOS,已成中国第二大操作系统。
随着鸿蒙市场份额的不断提升,相应的岗位也会迎来一个爆发式的增长。这对于想要换赛道的程序员来说是一个非常好的消息,话说大家最近有想法转型鸿蒙开发吗?
获取完整版高清学习资料,请点击→鸿蒙全栈开发学习资料(安全链接,请放心点击)
今天也是写鸿蒙的一天,跟大家聊聊鸿蒙当中的容器组件
Column 和 Row
Column 垂直布局 Row水平,主轴默认是Start,交叉轴默认是Center
Column({ space: 10 }) {
Column() {
Text('文本1').bordStyle()
Text('文本2').bordStyle()
Text('文本3').bordStyle()
Text('文本3').bordStyle()
}
.bordStyle()
.width(200)
.height(200)
// 主轴方向 默认是Start
// FlexAlign.Center 中间,
// FlexAlign.Start 开始的位置,
// FlexAlign.End 结束的位置,
// FlexAlign.SpaceBetween 上下贴边,其他平分
// FlexAlign.SpaceAround 上下剩余,是其他剩余的一半
// FlexAlign.SpaceEvenly 全部平分
.justifyContent(FlexAlign.SpaceEvenly)
// 交叉轴方向 默认是Center,End,Center
.alignItems(HorizontalAlign.End)
Stack
堆叠容器,类似于FramLayout,默认是Center
// 参数 alignContent默认是Center,其他是8个方向加一个Center
Stack({ alignContent: Alignment.TopStart }) {
Text('文本').margin({left:100,top:100})
// 也可以用通用属性zIndex ,来控制再Z轴的方向
Button('点我').zIndex(1)
}.bordStyle().width(200).height(200)
Flex
以弹性方式布局子组件的容器组件。Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用
必须设置成 Wrap,否则跟row ,colom 没啥区别
Flex({
// 主轴
direction: FlexDirection.Row,
// 是否换行,必须换呀,否则用这个就没啥意义了
wrap: FlexWrap.Wrap,
// 主轴方向
justifyContent: FlexAlign.Start,
// 所有子组件在Flex容器交叉轴上的对齐格式。
alignItems: ItemAlign.End,
// 交叉轴中有额外的空间时,多行内容的对齐方式
alignContent: FlexAlign.Start
})
RelativeContainer
相对布局,android中的RelativeLayout
anchor锚点,如果是父亲__container__,每个View都有id
top: {anchor: "container", align: VerticalAlign.Top},
ts复制代码RelativeContainer() {
Row().width(100).height(100)
.backgroundColor("#ffec0a0a")
.alignRules({
top: {anchor: "__container__", align: VerticalAlign.Top},
left: {anchor: "__container__", align: HorizontalAlign.Start}
})
.id("row1")
}
Scroll
可滚动的容器组件,当子组件的布局尺寸超过父组件的尺寸时,内容可以滚动。切记,子不能设置高度,得自己铺满父,nestedScroll api 10 可以实现滑动前套问题
Scroll(this.scroller) {
Column() {
ForEach(this.arr, (item: number) => {
Text(item.toString())
.width('90%')
.height(150)
.backgroundColor(0xFFFFFF)
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
.margin({ top: 10 })
}, (item: string) => item)
}.width('100%')
}
.scrollable(ScrollDirection.Vertical) // 滚动方向纵向
.scrollBar(BarState.Off) // 滚动条常驻显示
.scrollBarColor(Color.Gray) // 滚动条颜色
.scrollBarWidth(10) // 滚动条宽度
.edgeEffect(EdgeEffect.None) // 是否像弹簧一样,根ios一样的效果
.friction(0.6) // api10 摩擦系数
.onScroll((xOffset: number, yOffset: number) => { //滚动事件回调, 返回滚动时水平、竖直方向偏移量,单位vp。
// console.info(xOffset + ' ' + yOffset)
})
.onScrollEdge((side: Edge) => { //滚动到边缘事件回调。
console.info(`To the edge ${side}` )
})
.onScrollStart(() => {
console.info('Scroll onScrollStart')
})
.onScrollStop(() => {
console.info('Scroll onScrollStop')
})
.onReachStart(() => {// api 11 Scroll到达起始位置时触发。
//Scroll初始化时会触发一次,滚动到起始位置时触发一次。Scroll边缘效果为弹簧效果时,划动经过起始位置时触发一次,回弹回起始位置时再触发一次
console.info('Scroll onReachStart')
})
.onReachEnd(() => {// api 11 Scroll到达起始位置时触发。
//Scroll初始化时会触发一次,滚动到起始位置时触发一次。Scroll边缘效果为弹簧效果时,划动经过起始位置时触发一次,回弹回起始位置时再触发一次
console.info('Scroll onReachEnd')
})
Swiper
可以认为是 Banner
Swiper(this.controller) {
LazyForEach(this.data, (item: number, index: number) => {
Text(item.toString())
.width('90%')
.height(200)
.textAlign(TextAlign.Center)
.fontSize(40)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bold)
.border({ color: Color.Red, width: 5, radius: 20 })
.onClick(() => {
console.log(`点击了 ${item}`)
})
})
}
.index(0) // 初始化位置,默认是0
.autoPlay(true) // 是否轮播 默认是false
.interval(2000) //自动播放事件,停留的时间
// api 10 之后 可以设置 DotIndicator 圆点
// DigitIndicator 数字指示器
// boolean:是否启用导航点指示器。默认是true
.indicator(
// new DotIndicator()
// .itemWidth(10)
// .itemHeight(10)
// .selectedItemWidth(15)
// .selectedItemHeight(15)
// .selectedColor(Color.Red)// 指示器是选择的颜色
// .color(Color.Black)// 指示器默认颜色
// .mask(true)// 给指示器 添加阴影
new DigitIndicator()
.fontColor(Color.Black)
.selectedFontColor(Color.Red)
.digitFont({ size: 40, weight: FontWeight.Bold })
.selectedDigitFont({ size: 20, weight: FontWeight.Medium })
) //设置可选导航点指示器样式。
.loop(true) // ,滑动到最后,下一个是否是第一个,是否开启循环。设置为true时表示开启循环,在LazyForEach懒循环加载模式下,加载的组件数量建议大于5个。默认值:true
// .duration(1000) //子组件切换的动画时长,单位为毫秒。400ms,从1切换到2 需要的时间
.vertical(false) // 是否是纵向滑动,默认false
.itemSpace(10) //设置子组件与子组件之间间隙。默认值:0
// .displayMode(SwiperDisplayMode.STRETCH) //主轴方向上元素排列的模式,优先以displayCount设置的个数显示,displayCount未设置时本属性生效。
.cachedCount(10) //设置预加载子组件个数。默认值:1
.disableSwipe(false) // 禁止手动滑动
.curve(Curve.Linear) // 动画插值器
// .displayCount(10) // 显示个数,就是一页能显示多少,咱们一半就是写1个
// .effectMode(EdgeEffect.Spring) // 滑动的最后的 Spring,当loop是false的时候
// .displayArrow(true) //api 10 设置导航点箭头样式
.nextMargin(10) //api 10 后边距,用于露出后一项的一小部分。仅当SwiperDisplayMode为STRETCH模式时生效
.prevMargin(10) //api 10 前边距,用于露出前一项的一小部分。仅当SwiperDisplayMode为STRETCH模式时生效
// .nestedScroll()// api 11 前套滚动
.onChange((index: number) => {
console.log(`滚动到了 index = ${index}`)
})
.onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) =>{
console.log(`开始滚动 从index = ${index} 到 ${targetIndex} ${JSON.stringify(extraInfo)}` )
})
.onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) =>{
console.log(`手动开始滚动 从index = ${index} ${JSON.stringify(extraInfo)}` )
})
}
.height('100%')
写在最后
有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术?也不知道鸿蒙开发的知识点重点掌握的又有哪些?自学时频繁踩坑,导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙(HarmonyOS NEXT)全栈开发资料用来跟着学习是非常有必要的。
获取完整版高清学习资料,请点击→鸿蒙全栈开发学习资料(安全链接,请放心点击)
这份鸿蒙(HarmonyOS NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了
最新鸿蒙全栈开发学习线路
鸿蒙HarmonyOS开发教学视频