【鸿蒙】HarmonyOS NEXT星河入门到实战6-组件化开发-样式结构重用常见组件

devtools/2024/11/14 12:43:08/

目录

1、Swiper轮播组件

1.1 Swiper基本用法 

1.2 Swiper的常见属性

1.3 Swiper的样式自定义

1.3.1 基本语法

1.3.2 案例小米有品

2、样式&结构重用 

2.1 @Extend:扩展组件(样式、事件)

2.2 @Styles:抽取通用属性、事件

2.3 @Builder:自定义构建函数(结构、样式、事件)

3、滚动容器Scroll

3.1 Scroll 的核心用法

3.2 Scroll 的常见属性

3.3 Scroll 的控制器

3.4 Scroll 的事件

3.5 案例:京东案例实战

4、容器组件Tabs

4.1 Tabs 基本用法

4.2 Tabs 常用属性

4.3 滚动导航栏

4.4 自定义TabBar

4.4.1 基础结构

4.4.2 高亮切换

4.5 案例:小米有品底部Tabs


前言:组件化开发-样式结构重用&常见组件

1、Swiper轮播组件

1.1 Swiper基本用法 

import window from '@ohos.window';
@Entry
@Componentstruct Index {onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column(){Swiper(){Text('1').backgroundColor(Color.Yellow)Text('2').backgroundColor(Color.Orange)Text('3').backgroundColor(Color.Brown)}.width('100%').height(100).margin({bottom: 5})Swiper(){Image($r('app.media.ic_swiper_xmyp01'))Image($r('app.media.ic_swiper_xmyp02'))Image($r('app.media.ic_swiper_xmyp03'))Image($r('app.media.ic_swiper_xmyp04'))}.width('100%').height(150)}}
}

1.2 Swiper的常见属性

import window from '@ohos.window';
@Entry
@Componentstruct Index {onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column(){    Swiper(){Image($r('app.media.ic_swiper_xmyp01'))Image($r('app.media.ic_swiper_xmyp02'))Image($r('app.media.ic_swiper_xmyp03'))Image($r('app.media.ic_swiper_xmyp04'))}.loop(false) //是否开启循环  默认true,flase无法左滑到末页.autoPlay(true) //  自动播放 默认是false自动播放.invert(4000) // 播放间隔  默认3000.vertical(false) //纵向滑动轮播默认flase,true就是纵向.width('100%').height(150)}}
}

1.3 Swiper的样式自定义

1.3.1 基本语法

import window from '@ohos.window';
import { InterstitialDialogAction } from '@ohos.atomicservice.InterstitialDialogAction';@Entry
@Componentstruct Index {onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column(){Swiper(){Text('1').backgroundColor(Color.Yellow)Text('2').backgroundColor(Color.Orange)Text('3').backgroundColor(Color.Brown)}.width('100%').height(200).margin({bottom: 5})// .indicator(true) //定制小圆点。默认false.indicator(Indicator.dot().itemWidth(20).itemHeight(20).color(Color.Black).selectedItemWidth(25).selectedItemHeight(25).selectedColor(Color.White))Swiper(){Image($r('app.media.ic_swiper_xmyp01'))Image($r('app.media.ic_swiper_xmyp02'))Image($r('app.media.ic_swiper_xmyp03'))Image($r('app.media.ic_swiper_xmyp04'))}.loop(false) //是否开启循环  默认true,flase无法左滑到末页.autoPlay(true) //  自动播放 默认是false自动播放.invert(4000) // 播放间隔  默认3000.vertical(false) //纵向滑动轮播默认flase,true就是纵向.width('100%').height(150)}}
}

1.3.2 案例小米有品

import window from '@ohos.window';
import { InterstitialDialogAction } from '@ohos.atomicservice.InterstitialDialogAction';@Entry
@Componentstruct Index {onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column(){Swiper(){Image($r('app.media.ic_swiper_xmyp01'))Image($r('app.media.ic_swiper_xmyp02'))Image($r('app.media.ic_swiper_xmyp03'))Image($r('app.media.ic_swiper_xmyp04'))}.width('100%').aspectRatio(2.4) // 宽高比.autoPlay(true) //  自动播放 默认是false自动播放.invert(4000) // 播放间隔  默认3000.indicator(Indicator.dot().itemWidth(10).selectedItemWidth(30).selectedColor(Color.Black))}}
}

2、样式&结构重用 

2.1 @Extend:扩展组件(样式、事件)

import window from '@ohos.window';@Extend(Text)
function  textFn(){.fontSize(20).fontWeight(FontWeight.Bold)
}@Extend(Text)
function bannerExtend(bgColor: ResourceColor, msg: string){.textAlign(TextAlign.Center).backgroundColor(bgColor).fontColor(Color.White).fontSize(30).onClick(() => {AlertDialog.show({message: msg})})
}@Entry
@Componentstruct Index {@State message: string = '@Extend-扩展组件(样式,事件)';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column() {Text(this.message).textFn()Swiper() {Text('1').bannerExtend(Color.Orange, '轮播图1号')Text('2').bannerExtend(Color.Brown, '轮播图2号')Text('3').bannerExtend(Color.Green, '轮播图3号')}.width('100%').height(160)}.width('100%').height('100%')}
}

2.2 @Styles:抽取通用属性、事件

下图有Text、Button、Column是无法使用Extend实现,那么需要学习Styles,Styles可以全局定义、可以在组件里面定义,但是不支持传参

import window from '@ohos.window';// 1 全局定义
@Styles function commonStyles (){.width(100).height(100)
}@Entry
@Componentstruct Index {@State message: string = '@styles';@State bgColor: ResourceColor = Color.Gray// 2、 组件内定义@Styles SetBg (){.backgroundColor(this.bgColor).onClick(() => {this.bgColor = Color.Orange})}onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column({ space: 10 }) {Text(this.message).fontColor(Color.White).commonStyles().SetBg()Column() {}.commonStyles().SetBg()Button('按钮').commonStyles().SetBg()Button('重置').commonStyles().onClick( () => {this.bgColor = Color.Gray})}.width('100%').height('100%')}
}

2.3 @Builder:自定义构建函数(结构、样式、事件)

注意全局与局部区别(this.xxx)

import window from '@ohos.window';// 1 全局定义
@Builder
function  navItem (icon: ResourceStr, txt: string){Column({ space: 10 }) {Image(icon).width('80%')Text(txt)}.width('25%').onClick(() => {AlertDialog.show({message: `点了 ${txt}`})})
}@Entry
@Componentstruct Index {@State message: string = '@Builder';// 2 局部定义@BuildernavItem (icon: ResourceStr, txt: string){Column({ space: 10 }) {Image(icon).width('80%')Text(txt)}.width('25%').onClick(() => {AlertDialog.show({message: `点了 ${txt}`+ this.message})})
}onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column({ space: 20 }) {Text(this.message).fontSize(30)Row() {Row() {navItem($r('app.media.ic_reuse_01'), '阿里拍卖')navItem($r('app.media.ic_reuse_02'), '菜鸟')this.navItem($r('app.media.ic_reuse_03'), '芭芭农场')this.navItem($r('app.media.ic_reuse_04'), '医药')}}}.width('100%').height('100%')}}

3、滚动容器Scroll

3.1 Scroll 的核心用法

import window from '@ohos.window';@Entry
@Component
struct Index {@State message: string = '@春天的菠菜';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column() {// 如果需要滚动,外层Scroll(){Column({ space: 10 }) {ForEach(Array.from({ length: 10 }), (item: string, index) => {Text('测试文本' + (index + 1)).width('100%').height(100).textAlign(TextAlign.Center).backgroundColor(Color.Orange).fontSize(20).fontColor(Color.White).borderRadius(10)})}.padding(10).width('100%')}.width('100%').height(400).scrollable(ScrollDirection.Vertical) //    .scrollable(ScrollDirection.Horizontal)  //横向}}}

3.2 Scroll 的常见属性

import window from '@ohos.window';@Entry
@Component
struct Index {@State message: string = '@春天的菠菜';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column() {// 如果希望内容溢出, 能够滚动Scroll() {Column({ space: 10 }) {ForEach(Array.from({ length: 10 }), (item: string, index) => {Text('测试文本' + (index + 1)).width('100%').height(100).textAlign(TextAlign.Center).backgroundColor(Color.Orange).fontSize(20).fontColor(Color.White).borderRadius(10)})}.padding(10).width('100%')}.width('100%').height(400).scrollable(ScrollDirection.Vertical) // 设置滚动方向.scrollBar(BarState.Auto) // On一直显示 Off一直隐藏 Auto滑动显示.scrollBarColor(Color.Blue) // 滚动条颜色.scrollBarWidth(5) // 滚动条宽度.edgeEffect(EdgeEffect.Spring) // 滑动效果}}
}

3.3 Scroll 的控制器

import window from '@ohos.window';@Entry
@Component
struct Index {@State message: string = '@春天的菠菜';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}// 1. 创建 Scroller 对象 (实例化)myScroll: Scroller = new Scroller()build() {Column() {// 如果希望内容溢出, 能够滚动// 2. 绑定给 Scroll 组件Scroll(this.myScroll) {Column({ space: 10 }) {ForEach(Array.from({ length: 10 }), (item: string, index) => {Text('测试文本' + (index + 1)).width('100%').height(100).textAlign(TextAlign.Center).backgroundColor(Color.Orange).fontSize(20).fontColor(Color.White).borderRadius(10)})}.padding(10).width('100%')}.width('100%').height(400).scrollable(ScrollDirection.Vertical) // 设置滚动方向.scrollBar(BarState.Auto) // On一直显示 Off一直隐藏 Auto滑动显示.scrollBarColor(Color.Blue) // 滚动条颜色.scrollBarWidth(5) // 滚动条宽度.edgeEffect(EdgeEffect.Spring) // 滑动效果Button('控制滚动条位置').margin(20).onClick(() => {this.myScroll.scrollEdge(Edge.End)})Button('获取已经滚动的距离').onClick(() => {const x = this.myScroll.currentOffset().xOffsetconst y = this.myScroll.currentOffset().yOffsetAlertDialog.show({message: `x: ${x} y: ${y}`})})}}
}

3.4 Scroll 的事件

import window from '@ohos.window';@Entry
@Component
struct Index {@State message: string = '@春天的菠菜';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}// 1. 创建 Scroller 对象 (实例化)myScroll: Scroller = new Scroller()build() {Column() {// 如果希望内容溢出, 能够滚动// 2. 绑定给 Scroll 组件Scroll(this.myScroll) {Column({ space: 10 }) {ForEach(Array.from({ length: 10 }), (item: string, index) => {Text('测试文本' + (index + 1)).width('100%').height(100).textAlign(TextAlign.Center).backgroundColor(Color.Orange).fontSize(20).fontColor(Color.White).borderRadius(10)})}.padding(10).width('100%')}.width('100%').height(400).scrollable(ScrollDirection.Vertical) // 设置滚动方向.scrollBar(BarState.Auto) // On一直显示 Off一直隐藏 Auto滑动显示.scrollBarColor(Color.Blue) // 滚动条颜色.scrollBarWidth(5) // 滚动条宽度.edgeEffect(EdgeEffect.Spring) // 滑动效果.onScroll((x, y) => {console.log('已经滑动的距离:', this.myScroll.currentOffset().yOffset)})Button('控制滚动条位置').margin(20).onClick(() => {this.myScroll.scrollEdge(Edge.End)})Button('获取已经滚动的距离').onClick(() => {const y = this.myScroll.currentOffset().yOffsetAlertDialog.show({message: `y: ${y}`})})}}
}

3.5 案例:京东案例实战

import window from '@ohos.window';@Entry
@Component
struct Index {@State message: string = '@春天的菠菜';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}// 1、 创建scroll实例对象myScroll: Scroller =  new Scroller()@State yOffset: number = 0build() {Column() {Stack({ alignContent: Alignment.BottomEnd }) {// 顶部滚动区域// 2 和Scroll容器绑定Scroll(this.myScroll) {Column() {Image($r('app.media.ic_jd_scroll_01'))Image($r('app.media.ic_jd_scroll_02'))Image($r('app.media.ic_jd_scroll_03'))}}.scrollBar(BarState.Off).width('100%').backgroundColor(Color.Orange).onScroll( () => {this.yOffset = this.myScroll.currentOffset().yOffset})// 有时显示 有时隐藏-》条件渲染if( this.yOffset > 400){  Image($r('app.media.ic_jd_rocket')).width(40).backgroundColor(Color.White).borderRadius(20).padding(5)// .margin({right:20,bottom:20}).offset({ x: -20, y: -20 })// 3 添加事件.onClick( () => {this.myScroll.scrollEdge(Edge.Top)})}}.layoutWeight(1)// 底部 tabbar 图片(后面会学)Image($r('app.media.ic_jd_tab')).width('100%')}}
}

4、容器组件Tabs

4.1 Tabs 基本用法

import window from '@ohos.window';@Entry
@Component
struct Index {@State message: string = '@春天的菠菜';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Tabs(){TabContent(){Text('首页内容') // 只能有一个子组件}.tabBar('首页')TabContent(){Text('推荐内容')}.tabBar('推荐')TabContent(){Text('发现内容')}.tabBar('发现')TabContent(){Text('我的')}.tabBar('我的')}}
}

4.2 Tabs 常用属性

import window from '@ohos.window';@Entry
@Component
struct Index {@State message: string = '@春天的菠菜';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Tabs({ barPosition: BarPosition.End }) {TabContent() {Text('首页内容') // 有且只能一个子组件}.tabBar('首页') // 配置导航TabContent() {Text('推荐内容') // 有且只能一个子组件}.tabBar('推荐')TabContent() {Text('发现内容') // 有且只能一个子组件}.tabBar('发现')TabContent() {Text('我的内容') // 有且只能一个子组件}.tabBar('我的')}.vertical(false) // 调整导航水平或垂直.scrollable(false) // 是否开启手势滑动.animationDuration(0) // 点击滑动的动画时间}
}

4.3 滚动导航栏

import window from '@ohos.window';@Entry
@Component
struct Index {@State message: string = '@春天的菠菜';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}titles: string[] = ['首页','关注','热门','军事','体育','八卦','数码','财经','美食','旅行']build() {// 生成10个面板 → 10个小导航Tabs() {ForEach(this.titles, (item: string, index) => {TabContent() {Text(`${item}内容`)}.tabBar(item)})}// barMode属性, 可以实现滚动导航栏.barMode(BarMode.Scrollable)}
}

4.4 自定义TabBar

4.4.1 基础结构

import window from '@ohos.window';@Entry
@Component
struct Index {@State message: string = '@春天的菠菜';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}@BuildermyBuilder (title: string, img: ResourceStr) {Column() {Image(img).width(30)Text(title)}}build() {Tabs({ barPosition: BarPosition.End }) {TabContent() {Text('购物车内容')}.tabBar(this.myBuilder('购物车', $r('app.media.ic_tabbar_icon_2')))TabContent() {Text('我的内容')}.tabBar(this.myBuilder('我的', $r('app.media.ic_tabbar_icon_3')))}}
}

 

4.4.2 高亮切换

import window from '@ohos.window';@Entry
@Component
struct Index {@State message: string = '@春天的菠菜';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}// 准备状态, 存储激活的索引@State selectedIndex: number = 0@BuildermyBuilder (itemIndex: number, title: string, img: ResourceStr, selImg: ResourceStr) {// 如果激活的是自己, 图片/文本 都需要调整样式 → 需要区分不同的 tabBarColumn() {Image(itemIndex == this.selectedIndex ? selImg : img).width(30)Text(title).fontColor(itemIndex == this.selectedIndex ? Color.Red : Color.Black)}}build() {Tabs({ barPosition: BarPosition.End }) {TabContent() {Text('购物车内容')}.tabBar(this.myBuilder(0, '购物车', $r('app.media.ic_tabbar_icon_2'), $r('app.media.ic_tabbar_icon_2_selected')))TabContent() {Text('我的内容')}.tabBar(this.myBuilder(1, '我的', $r('app.media.ic_tabbar_icon_3'), $r('app.media.ic_tabbar_icon_3_selected')))}.onChange((index: number) => {// console.log('激活的索引', index)this.selectedIndex = index}).animationDuration(0).scrollable(false)}
}

4.5 案例:小米有品底部Tabs

import window from '@ohos.window';@Entry
@Component
struct Index {@State message: string = '@春天的菠菜';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}// 准备状态, 存储激活的索引@State selectedIndex: number = 0@BuildermyBuilder (itemIndex: number, title: string, img: ResourceStr, selImg: ResourceStr) {// 如果激活的是自己, 图片/文本 都需要调整样式 → 需要区分不同的 tabBarColumn() {Image(itemIndex == this.selectedIndex ? selImg : img).width(30)Text(title).fontColor(itemIndex == this.selectedIndex ? Color.Red : Color.Black)}}@BuildercenterBuilder () {Image($r('app.media.ic_reuse_02')).width(40).margin({ bottom: 10 })}build() {Tabs({ barPosition: BarPosition.End }) {TabContent() {Text('首页内容')}.tabBar(this.myBuilder(0, '首页', $r('app.media.ic_tabbar_icon_0'), $r('app.media.ic_tabbar_icon_0_selected')))TabContent() {Text('分类内容')}.tabBar(this.myBuilder(1, '分类', $r('app.media.ic_tabbar_icon_1'), $r('app.media.ic_tabbar_icon_1_selected')))// 特殊形状的TabTabContent() {Text('活动内容')}.tabBar(this.centerBuilder())TabContent() {Text('购物车内容')}.tabBar(this.myBuilder(3, '购物车', $r('app.media.ic_tabbar_icon_2'), $r('app.media.ic_tabbar_icon_2_selected')))TabContent() {Text('我的内容')}.tabBar(this.myBuilder(4, '我的', $r('app.media.ic_tabbar_icon_3'), $r('app.media.ic_tabbar_icon_3_selected')))}.onChange((index: number) => {// console.log('激活的索引', index)this.selectedIndex = index}).animationDuration(0).scrollable(false)}
}


http://www.ppmy.cn/devtools/114238.html

相关文章

Golang 中实现动态代理

在 Go 语言中,没有像 Java 中那样直接支持的动态代理机制,因为 Go 是静态类型的编程语言,不支持像 Java 反射那样基于接口的动态代理。但我们可以通过组合使用反射(reflect 包)和高阶函数的方式,实现类似于…

win10怎么配置dnat规则,访问win10的网口A ip的6443端口,映射到1.1.1.1的6443端口去

在Windows 10上配置DNAT(Destination Network Address Translation)规则,可以使用Windows自带的netsh命令来实现。以下是具体步骤: 打开命令提示符(以管理员身份运行): 按 Win X,…

python学习笔记目录

基于windows下docker安装HDDM-CSDN博客 在python中安装HDDM-CSDN博客(这个办法没安装成功)

【鸿蒙】HarmonyOS NEXT星河入门到实战9-组件化开发进阶应用状态管理

目录 1.1 创建页面 1.2 页面跳转和后退 1.3 页面栈 1.4 路由模式 1.5 路由传参 2、生命周期 3、Stage模型 3.1 目录概览 3.2 app.json5应用配置 3.3 module.json5模型配置 3.4 UIAbility组件 3.5 UIAbility的添加和设置启动 3.6 UIAbility组件的生命周期 3.7 拉起另…

RT-DETR改进策略:BackBone改进|Swin Transformer,最强主干改进RT-DETR

摘要 在深度学习与计算机视觉领域,Swin Transformer作为一种强大的视觉Transformer架构,以其卓越的特征提取能力和自注意力机制,正逐步引领着图像识别与检测技术的革新。近期,我们成功地将Swin Transformer引入并深度整合至RT-DERT(一种高效的实时目标检测与识别框架)中…

硬件工程师笔试面试——无线通讯模块

目录 15、无线通讯模块 15.1 基础 无线通讯模块实物图 15.1.1 概念 15.1.2 常见的无线通讯模块及其特点 15.1.3 无线通讯模块参数 15.1.4 无线通讯模块工作原理 15.2 相关问题 15.2.1 如何根据项目需求选择合适的无线通讯模块? 15.2.2 无线通讯模块的安全性如何,如…

针对Docker容器的可视化管理工具—DockerUI

目录 ⛳️推荐 前言 1. 安装部署DockerUI 2. 安装cpolar内网穿透 3. 配置DockerUI公网访问地址 4. 公网远程访问DockerUI 5. 固定DockerUI公网地址 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下…

C++(Qt)软件调试---断点高级用法(20)

C(Qt)软件调试—断点高级用法(20) 文章目录 C(Qt)软件调试---断点高级用法(20)[toc]1、概述2、断点高级用法1.1 条件断点1.2 日志断点/记录点/消息追踪点1.3 函数断点1.4 命中次数断点1.5 异常断点1.6 等待断点/触发断点1.7 临时断…