HarmonyOS NEXT零基础入门到实战-第二部分
Swiper 轮播组件
Swiper是一个 容器 组件，当设置了多个子组件后，可以对这些 子组件 进行轮播显示。（文字、图片...）
1、Swiper基本语法
2、Swiper常见属性
3、Swiper样式自定义
4、案例：小米有品
5、作业：手机淘宝
Swiper相关源代码：
@Entry
@Component
struct Index {
build() {
Column() {
// Swiper 包内容，设尺寸
Swiper() {
Text('1')
.backgroundColor(Color.Orange)
Text('2')
.backgroundColor(Color.Yellow)
Text('3')
.backgroundColor(Color.Brown)
}
.width('100%')
// .height(300)
.aspectRatio(2.4) // 设置和图片一致的宽高比，保证图片正常适配
// 常见属性
.loop(true) // 开启循环
.autoPlay(true) // 自动播放，默认3s
.interval(5000) // 自动轮播间隔
.vertical(false) // 横向/纵向
// 定制小圆点
// .indicator(false)
.indicator(
Indicator.dot() // 小圆点
.itemWidth(10) // 默认的宽
.itemHeight(5) // 默认的高
// .color(Color.Gray) // 默认的颜色
.selectedItemWidth(30) // 选中的宽
.selectedItemHeight(5) // 选中的高
.selectedColor(Color.White) // 选中的颜色
)
Swiper() {
Image($r('app.media.hw'))
.objectFit(ImageFit.Cover)
Image($r('app.media.pg'))
.objectFit(ImageFit.Cover)
Image($r('app.media.xm'))
.objectFit(ImageFit.Cover)
}
.width('100%')
.height(300)
.loop(true) // 开启循环
.autoPlay(true) // 自动播放，默认3s
.interval(5000) // 自动轮播间隔
}
}
}
样式&结构重用
@Extend：扩展组件（样式、事件）
比如：
@Extend(Text)
function bannerItem(bgColor: ResourceColor, msg: string) {
.fontSize(30)
.fontColor(Color.White)
.backgroundColor(bgColor)
.textAlign(TextAlign.Center)
.onClick(() => {
AlertDialog.show({
message: msg
})
})
}
Swiper() {
Text('1')
.bannerItem(Color.Orange, '轮播图 1')
Text('2')
.bannerItem(Color.Brown, '轮播图 2')
Text('3')
.bannerItem(Color.Green, '轮播图 3')
}
@Styles:抽取通用属性、事件
针对所有组件的公有属性，比如说宽高、背景色、点击事件等，@Styles不支持传参
1、全局定义（不支持this.调用）
@Styles function commonStyles() {
.width(100)
.height(100)
.onClick(() => { ... })
}
2、在组件内定义（省略function） 才能通过this访问到自己的状态 这种使用相对全局使用较多
@Styles setBg() {
.backgroundColor(Color.Red)
}
@Builder:自定义构建函数（结构、样式、事件）
// 全局 Builder
@Builder
function navItem(icon: ResourceStr, txt: string) {
Column({space: 10}) {
Image(icon)
.width('80%')
Text(txt)
}
.width('25%')
.onClick(() => {
AlertDialog.show({
message: '点了' + txt
})
})
}
@Entry
@Component
struct Index {
@State builderStr: string = '@Builder'
// 局部builder 只能定义在组件内 this.xxx
@Builder
navItem(icon: ResourceStr, txt: string) {
Column({space: 10}) {
Image(icon)
.width('80%')
Text(txt)
}
.width('25%')
.onClick(() => {
AlertDialog.show({
message: '点了' + txt + this.builderStr
})
})
}
build() {
Column() {
Row() {
navItem($r('app.media.xm'), '小米手机')
navItem($r('app.media.hw'), '华为手机')
this.navItem($r('app.media.pg'), '苹果手机')
}
}
}
}
总结
@Extend 抽取 特定组件 样式、事件 可以传递参数
@Styles 抽取 公共样式、事件 不可以传递参数
@Builder 抽取结构、样式、事件 可以传递参数
滚动容器Scroll
当子组件的布局尺寸超过Scroll的尺寸时，内容可以滚动
学习目录：
1、Scroll 的核心用法
2、Scroll 的常见属性
3、Scroll 的控制器
4、Scroll 的事件
5、案例：京东案例实战
源代码：
@Entry
@Component
struct Index {
build() {
Column() {
// 如果希望内容溢出，能够滚动
Scroll() {
Column({space: 10}) {
ForEach(Array.from({length: 10}), (item: string, index: number) => {
Text('测试文本' + (index + 1))
.width('100%')
.height(100)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Orange)
.fontSize(20)
.fontColor(Color.White)
.borderRadius(20)
})
}
.padding(10)
.width('100%')
}
// .scrollable(ScrollDirection.Horizontal)
// .scrollBar(BarState.Auto)
// .scrollBarColor(Color.Blue)
// .scrollBarWidth(5)
.edgeEffect(EdgeEffect.Spring) // 滑动效果：弹簧
}
.width('100%')
.height(200)
}
}
Scroll的控制器：
核心步骤：
1、实例化 Scroller 的控制器
2、绑定给 Scroll 组件
3、控制器的方法 控制滚动， 控制器属性 获取滚动距离
Scroll 事件：
Scroll 组件提供了一些事件，让开发者可以在适当的时候添加逻辑
Scroll(){
}
.onScroll((x, y) => {
// 滚动时一直触发 可以结合 scroller的currentOffset方法 获取滚动距离
})
.onWillScroll((offset: number) => {
console.log('onWillScroll 已经滑动的距离', this.myScroller.currentOffset().yOffset + offset)
})
.onScroll((x, y) => {
console.log('onScroll 已经滑动的距离', this.myScroller.currentOffset().yOffset)
})
滚动容器Scroll - 京东案例实战
需求说明:
1、点击火箭回到顶部
2、火箭显示效果切换
2.1 默认隐藏
2.2 超过400 ---->显示，反之--->隐藏
@State yOffset : number = 0;
.onScroll((x, y) => {
yOffset = this.myScroller.currentOffset().yOffset
})
if(yOffset > 400) {
// 渲染
}
源代码：
@Entry
@Component
struct Index {
// 1、创建 Scroller 对象（实例化）
myScroller: Scroller = new Scroller()
build() {
Column() {
// 如果希望内容溢出，能够滚动
// 2、绑定给 Scroll 组件
Scroll(this.myScroller) {
Column({space: 10}) {
ForEach(Array.from({length: 10}), (item: string, index: number) => {
Text('测试文本' + (index + 1))
.width('100%')
.height(100)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Orange)
.fontSize(20)
.fontColor(Color.White)
.borderRadius(20)
})
}
.padding(10)
.width('100%')
}
.width('100%')
.height(400)
// .scrollable(ScrollDirection.Horizontal)
// .scrollBar(BarState.Auto)
// .scrollBarColor(Color.Blue)
// .scrollBarWidth(5)
.edgeEffect(EdgeEffect.Spring) // 滑动效果：弹簧
.onWillScroll((offset: number) => {
console.log('onWillScroll 已经滑动的距离', this.myScroller.currentOffset().yOffset + offset)
})
.onScroll((x, y) => {
console.log('onScroll 已经滑动的距离', this.myScroller.currentOffset().yOffset)
})
Button('控制滚动条位置').margin(20)
.onClick(() => {
this.myScroller.scrollEdge(Edge.Top) // 会滚动顶部
})
Button('获取已经滚动的距离')
.onClick(() => {
const y = this.myScroller.currentOffset().yOffset
AlertDialog.show({
message: `y:${y}`
})
})
}
}
}
====
容器组件 Tabs
当页面内容较多时，可以通过Tabs组件进行 分类展示
学习目录：
1、Tabs 基本用法
2、Tabs 常见属性
3、滚动导航栏
4、自定义TabBar
5、案例： 小米有品底部Tabs
源代码：
@Entry
@Component
struct Index {
titles: string[] = [
'首页', '关注', '热门', '军事','体育',
'八卦', '数码', '财经', '美食','旅行'
]
build() {
Column() {
// 调整位置 顶部或者底部（参数）
Tabs({barPosition: BarPosition.Start}) {
ForEach(this.titles, (item: string, index) => {
TabContent() {
Text(`${item}内容`)
}
.tabBar(item)
})
}
.vertical(false) // 调整导航水平或者垂直
.scrollable(true) // 是否开启手势滑动
.animationDuration(0) // 点击滑动动画时间
.barMode(BarMode.Scrollable) // 滚动导航栏
}
}
}
自定义的TabBar
1、基础结构 2、高亮切换
源代码：
@Entry
@Component
struct Index {
// 准备状态，存储激活的索引
@State selectedIndex: number = 0;
build() {
// 调整位置 顶部或者底部（参数）
Tabs({barPosition: BarPosition.End}) {
TabContent() {
Text('购物车')
}
.tabBar(this.myBuilder(0, '购物车', $r('app.media.startIcon'), $r('app.media.xm')))
TabContent() {
Text('我的')
}
.tabBar(this.myBuilder(1, '我的', $r('app.media.startIcon'), $r('app.media.hw')))
}
// .vertical(false) // 调整导航水平或者垂直
// .scrollable(true) // 是否开启手势滑动
// .animationDuration(0) // 点击滑动动画时间
// .barMode(BarMode.Scrollable) // 滚动导航栏
.onChange((index: number) => {
this.selectedIndex = index
})
}
@Builder
myBuilder(itemIndex: number,title: string, img: ResourceStr, selectedImg: ResourceStr) {
Column() {
Image(itemIndex == this.selectedIndex ? selectedImg : img)
.width(30)
Text(title)
.fontColor(itemIndex == this.selectedIndex ? Color.Red : Color.Black)
}
}
}
案例 小米有品底部Tabs：
实现思路：
1、基础结构 2、高亮控制 3、中间特殊结构
源代码：
@Entry
@Component
struct Index {
// 准备状态，存储激活的索引
@State selectedIndex: number = 0;
build() {
// 调整位置 顶部或者底部（参数）
Tabs({barPosition: BarPosition.End}) {
TabContent() {
Text('购物车')
}
.tabBar(this.myBuilder(0, '购物车', $r('app.media.startIcon'), $r('app.media.xm')))
// 特殊形状的Tab
TabContent(){
Text('活动内容')
}
.tabBar(this.centerBuilder())
TabContent() {
Text('我的')
}
.tabBar(this.myBuilder(2, '我的', $r('app.media.startIcon'), $r('app.media.hw')))
}
// .vertical(false) // 调整导航水平或者垂直
// .scrollable(true) // 是否开启手势滑动
// .animationDuration(0) // 点击滑动动画时间
// .barMode(BarMode.Scrollable) // 滚动导航栏
.onChange((index: number) => {
this.selectedIndex = index
})
}
@Builder
myBuilder(itemIndex: number,title: string, img: ResourceStr, selectedImg: ResourceStr) {
Column() {
Image(itemIndex == this.selectedIndex ? selectedImg : img)
.width(30)
Text(title)
.fontColor(itemIndex == this.selectedIndex ? Color.Red : Color.Black)
}
}
@Builder
centerBuilder() {
Image($r('app.media.pg'))
.width(30)
.height(30)
.margin({bottom: 20})
}
}