HarmonyOS NEXT实战：自界说封装多种样式导航栏组件
已上架的元服务大家帮个忙。搜索一下下面的元服务，进去看下就行
[*]家具风格分类转盘
[*]宠物品种分类转盘
[*]星座特点分类转盘
[*]妙语集语
[*]玩具类型分类转盘
[*]本日保举吃什么
[*]时尚风格分类转盘
[*]活动项目分类转盘
手机 折叠屏 平板都可以，必要真机
涉及知识点和装饰器
[*]@ComponentV2，@Local， @Builder，@BuilderParam，@Extend， @Require ，@Param，@Event等
[*]第三方库：ZRouter ，如项目中原来就用了ZRouter路由库，案例中点返回按钮直接使用了 ZRouter.pop()，没有效到的话也支持自界说返回事件。
配景：
在项目开发历程中，导航栏的应用场景颇为繁多。以我的页面为例，其导航栏呈现为图标、文字与箭头相组合的样式；而设置页面的导航栏则是图标、文字、右侧文字以及小红点的搭配形式；至于公用顶部导航栏，又表现为左侧返回图标、中央文字、右侧图标与文字的布局。倘若针对每一处用到导航栏的地方均单独编写代码，那么代码的重复编写征象将极为严肃。基于此，我们可采用自界说封装的方式构建公用组件。如此一来，不但为项目后期的维护与拓展提供了极大的便利，同时也可以或许明显提拔开发服从，让开发者有更多精力投入到更具代价的工作思索中，淘汰不必要的重复劳作时间消耗。
先上效果图
[*] 图一
https://i-blog.csdnimg.cn/direct/cff473cd05ee4cd3910bc1a464e1bce7.gif
[*] 图二
https://i-blog.csdnimg.cn/direct/a9290e26adae486e9a620ac7ebf19fda.gif
[*] 图三
https://i-blog.csdnimg.cn/direct/b39d4d3527a4474aa87ead218d481991.gif
实现 图一 效果图
[*]1、首先必要界说好类型，比如 图片+文字+小红点+返回右键等。
@ObservedV2
export class TabHorizontalModel {
title: string;
index: number; //下标
icon: string | Resource;
hasIcon: boolean; //是否显示图
@Trace rightTitle: string;
hasRightTitle: boolean;
@Trace hasNew: boolean; //是否显示红点
hasRightIcon: boolean; //是否显示图
constructor(title: string, index: number = -1, icon: string | Resource = '', hasIcon: boolean = false, rightTitle: string = '', hasRightTitle: boolean = false, hasNew: boolean = false,
hasRightIcon: boolean = true) {
this.icon = icon;
this.hasIcon = hasIcon;
this.title = title;
this.rightTitle = rightTitle;
this.hasRightTitle = hasRightTitle;
this.hasNew = hasNew && rightTitle !== '';
this.index = index;
this.hasRightIcon = hasRightIcon;
}
}
[*]2、封装一个通用的 横向Tab 图片、文字、右边文字、小红点 组件
import { CommonConst } from "utils"
import { TabHorizontalModel } from "../model/TabHorizontalModel"
/**
* Author:J
* Describe: 横向Tab 图片、文字、右边文字、小红点
*/
@ComponentV2
export struct HorizontalTabItemComp {
@Param @Require tabItem: TabHorizontalModel= new TabHorizontalModel('')
@Param onItemClick?: () => void = undefined
build() {
Row() {
Image(this.tabItem.icon)
.width(24)
.margin({ right: 12 })
.visibility(this.tabItem.hasIcon ? Visibility.Visible : Visibility.None)
Text(this.tabItem.title)
.fontSize(16)
.fontColor($r('app.color.color_222222'))
.layoutWeight(1)
if (this.tabItem.hasNew) {
Badge({
value: '',
position: BadgePosition.Right,
style: { badgeSize: 7, badgeColor: $r('app.color.color_FA2A2D') }
}) {
Text(this.tabItem.rightTitle)
.fontSize(16)
.fontColor($r('app.color.color_222222'))
.visibility(this.tabItem.hasRightTitle ? Visibility.Visible : Visibility.None)
.margin({ right: 20 })
}
} else {
Text(this.tabItem.rightTitle)
.fontSize(16)
.fontColor($r('app.color.color_222222'))
.visibility(this.tabItem.hasRightTitle ? Visibility.Visible : Visibility.None)
}
Image($r('app.media.ic_arrow_right_gray_small'))
.width(24)
.margin({ left: 12 })
.visibility(this.tabItem.hasRightIcon ? Visibility.Visible : Visibility.None)
}
.width(CommonConst.FULL_PARENT)
.height(44)
.backgroundColor($r('app.color.white'))
.onClick(() => {
this.onItemClick?.()
})
}
}
[*]3、使用案例
3.1 针对于一个，可以用下面的代码，但是对于一个页面有多个的话，要是一行行的写，固然可以，但是不发起，而且也不优雅，以是必要用到ForEach来实现。
HorizontalTabItemComp({
tabItem: new TabHorizontalModel("我的积分", 0, $r('app.media.ic_coin'), true),
onItemClick: () => {
ToastUtil.showToast('我的积分')
}
}).margin({ left: 12, right: 12 })
3.2 界说一组数据，塞到数组里
/** 横向Tab */
export const horizontalTabItemData: Array<TabHorizontalModel> = [
new TabHorizontalModel("我的积分", 0, $r('app.media.ic_coin'), true, '666', true),
new TabHorizontalModel("我的分享", 1, $r('app.media.ic_share_article'), true),
new TabHorizontalModel("我的收藏", 2, $r('app.media.ic_collect'), true),
new TabHorizontalModel("我的书签", 3, $r('app.media.ic_read_later'), true),
new TabHorizontalModel("阅读历史", 4, $r('app.media.ic_read_record'), true),
new TabHorizontalModel("开源项目", 5, $r('app.media.ic_github'), true),
new TabHorizontalModel("关于作者", 6, $r('app.media.ic_about'), true, '请他喝杯咖啡~', true),
]
3.3 使用ForEach来实现
ForEach(horizontalTabItemData, (item: TabHorizontalModel, index: number) => {
HorizontalTabItemComp({
tabItem: item,
onItemClick: () => {
this.onItemClick(item)
}
}).margin({ left: 12, right: 12 })
})
/** 点击事件 */
private onItemClick(item: TabHorizontalModel) {
ToastUtil.showToast(item.title)
if (item.index == 0) {
} else if (item.index == 1) {
} else if (item.index == 2) {
} else if (item.index == 3) {
} else if (item.index == 4) {
} else if (item.index == 5) {
} else if (item.index == 6) {
}
}
实现 图二 效果图
[*]1、首先必要界说好必要的参数
/** 标题 */
@Param title: ResourceStr = '';
/** 返回按钮的点击事件 */
@Param backClick?: (event?: ClickEvent) => void = undefined;
/** 是否显示右侧按钮 */
@Param isShowRight: boolean = false;
/** 右侧标题 */
@Param rightTitle: ResourceStr = '';
/** 右侧图片 */
@Param rightImage: ResourceStr = '';
/** 右侧点击事件 */
@Param rightClick?: (event?: ClickEvent) => void = undefined;
[*]2、封装一个公用的自界说导航栏组件，内置了导航栏的返回按钮、标题、右侧按钮等，完整代码如下：
import { ZRouter } from '@hzw/zrouter';import { CommonConst } from 'utils';/** * Author:J * Describe:自界说导航栏组件 * 内置了导航栏的返回按钮、标题、右侧按钮等 */@ComponentV2export struct TitleBarComp {/** 标题 */
@Param title: ResourceStr = '';
/** 返回按钮的点击事件 */
@Param backClick?: (event?: ClickEvent) => void = undefined;
/** 是否显示右侧按钮 */
@Param isShowRight: boolean = false;
/** 右侧标题 */
@Param rightTitle: ResourceStr = '';
/** 右侧图片 */
@Param rightImage: ResourceStr = '';
/** 右侧点击事件 */
@Param rightClick?: (event?: ClickEvent) => void = undefined;
build() { Column() { Row() { Image($r('app.media.ic_arrow_left')).width(44).padding(8).onClick(() => { if (this.backClick) { this.backClick() } else { ZRouter.pop() } }) Text(this.title) .fontColor($r('app.color.color_222222')) .fontSize(16) .maxLines(1) .fontWeight(FontWeight.Bold) Row() { if (this.rightTitle) { Text(this.rightTitle) .fontColor($r('app.color.color_222222')) .fontSize(16) .margin({ right: 10 }) } else { Image(this.rightImage ? this.rightImage : $r('app.media.ic_local_search')) .width(44) .padding(10) } } .onClick(this.rightClick) .visibility(this.isShowRight ? Visibility.Visible : Visibility.Hidden) } .width(CommonConst.FULL_PARENT) .height(44) .justifyContent(FlexAlign.SpaceBetween) .backgroundColor($r('app.color.white')) Divider() .width(CommonConst.FULL_PARENT) .color($r('app.color.color_F0F0F0')) } .width(CommonConst.FULL_PARENT) .height(45)}}
[*]3、使用案例，包罗了多种样式使用
NavDestination() {
Column({space:8}) {
Text('第一种样式').fontColor(Color.Red)
TitleBarComp({ title: '设置' })
Text('第二种样式，自定义返回事件').fontColor(Color.Red)
TitleBarComp({
title: '设置二', backClick: () => {
ToastUtil.showToast('自定义返回事件')
}
})
Text('第三种样式，右边有文字').fontColor(Color.Red)
TitleBarComp({
title: '设置三',
isShowRight: true,
rightTitle: '右边',
rightClick: () => {
ToastUtil.showToast('右边')
}
})
Text('第四种，右边有图片').fontColor(Color.Red)
TitleBarComp({
title: '设置四',
isShowRight: true,
rightImage: $r('app.media.ic_share_article'),
rightClick: () => {
ToastUtil.showToast('右边')
}
})
}
.width(CommonConst.FULL_PARENT)
.height(CommonConst.FULL_PARENT)
.backgroundColor($r('app.color.white'))
}
.hideTitleBar(true)
实现 图三 效果图
[*]配景：这个逻辑比力复杂，一步步优化实现，为啥还必要自界说，直接用官方自带的Tabs+TabContent就可以实现啊；如果只是针对于一行都是简单文字切换那还好，但是对于那种，左边、右边是图片+中央是文字用自带的就不行了，因为下面的内容的宽度是铺满屏幕的宽度的，以是必要自界说。
[*]1、界说必要的参数，自界说左边视图，右边视图，内容，下划线，是否滑动等，具体可以看完整代码。
@Param currentTabIndex: number = 0;
@Param tabContentArr: boolean[] = []; //存储页面状态
private tabsController: TabsController = new TabsController();
@Param tabs: Array<TabBarModel> = [];
//左边视图
@BuilderParam tabBarLeft: () => void = this.barLeft;
//右边视图
@BuilderParam tabBarRight: () => void = this.barRight;
//内容
@BuilderParam tabContentBuilder: ($$: TabBarModel) => void = this._TabContentBuilder;
//是否显示下划线
@Param isShowDivider: boolean = false;
//是否滑动
@Param scrollable: boolean = false;
//顶部中间视图是否居中 true居中 false 默认 居左
@Param isTabBarCenter: boolean = false;
//选中字体颜色
@Param selectFontColor: ResourceColor = $r('app.color.color_222222');
//滑动条是否显示
@Param isDividerVisible: boolean = true;
//更新
@Event changeFactory: (currentTabIndex: number, isShowDivider: boolean) => void = (currentTabIndex: number, isShowDivider: boolean) => {
}
[*]2、自界说顶部视图，List替换tabBar 共同Tabs 左视图–tabBar–右视图
Column() {
//切换
this.customTabBar()
//下划线
Divider()
.color($r('app.color.color_F0F0F0'))
.visibility(this.isShowDivider ? Visibility.Visible : Visibility.None)
//TabContent中的tabBar居中显示，所以暂时不用tabBar
Tabs({ controller: this.tabsController, barPosition: BarPosition.Start }) {
ForEach(this.tabs, (item: TabBarModel, index: number) => {
TabContent() {
//滑到哪个页面再加载,防止一块加载
if (this.currentTabIndex === index || this.tabContentArr) {
this.tabContentBuilder(item)
}
}
// .tabBar()
}, (item: string) => item)
}
.layoutWeight(1)
.barHeight(0) //隐藏tabBar
.scrollable(this.scrollable)
.onChange(index => {
this.tabContentArr = true
this.changeFactory(index,this.tabs.isShowDivider)
})
}.width(CommonConst.FULL_PARENT)
.backgroundColor($r('app.color.white'))
[*]3、 List实现【标题+横线】选中效果
@Builder
customTabBar() {
Row() {
//左边自定义
this.tabBarLeft()
//中间
CustomTabBarComp({
currentTabIndex: this.currentTabIndex,
tabs: this.tabs,
selectFontColor: this.selectFontColor,
isTabBarCenter: this.isTabBarCenter,
onTabClick: (index: number) => {
this.tabsController.changeIndex(index)
},
isDividerVisible: this.isDividerVisible
})
//右边自定义
this.tabBarRight()
}
.width(CommonConst.FULL_PARENT)
.height(44)
}
[*]4、标题+横线 List和TabContent.tabBar都可以用
@ComponentV2
export struct TabBarViewComp {
@Param private index: number = 0
@Param currentTabIndex: number = 0
@Param tabs: Array<TabBarModel> = new Array<TabBarModel>()
//选中字体颜色
@Param selectFontColor: ResourceColor = $r('app.color.color_222222');
@Param onTabClick: (index: number) => void = () => {
};
@Param isDividerVisible: boolean = true;
build() {
Column() {
//右上角图片
Image(this.tabs.rightSrc)
.height(11)
.margin({ left: 46 }).visibility(this.tabs.isShowRightSrc ? Visibility.Visible : Visibility.None)
Text(this.tabs.name)
.fontSize(this.currentTabIndex == this.index ? 16 : 14)
.fontColor(this.currentTabIndex == this.index ? this.selectFontColor : $r('app.color.color_505050'))
.fontWeight(this.currentTabIndex == this.index ? FontWeight.Bold : FontWeight.Normal)
.margin({ top: this.tabs.isShowRightSrc ? 0 : 11 })
Divider()
.width(16)
.height(4)
.backgroundColor($r('app.color.colorPrimary'))
.margin({ top: 4, bottom: 4 })
.borderRadius(12)
.visibility(this.isDividerVisible && this.currentTabIndex == this.index ? Visibility.Visible : Visibility.Hidden)
}
.margin({ right: 15 })
.onClick(() => {
this.onTabClick(this.index)
})
}
}
[*]5、完整代码如下
import { CommonConst } from "utils";import { TabBarModel } from "../model/TabBarModel";/** * Author:J * Describe:自界说tabBar 左视图--tabBar--右视图 * * ListWithTabBarView({}) List替换tabBar 共同Tabs左视图--tabBar--右视图 * CustomTabBarComp({}) List实现【标题+横线】选中效果 * TabBarViewComp({})标题+横线 List和TabContent.tabBar都可以用 */@Preview@ComponentV2export struct ListWithTabBarView {@Param currentTabIndex: number = 0;
@Param tabContentArr: boolean[] = []; //存储页面状态
private tabsController: TabsController = new TabsController();
@Param tabs: Array<TabBarModel> = [];
//左边视图
@BuilderParam tabBarLeft: () => void = this.barLeft;
//右边视图
@BuilderParam tabBarRight: () => void = this.barRight;
//内容
@BuilderParam tabContentBuilder: ($$: TabBarModel) => void = this._TabContentBuilder;
//是否显示下划线
@Param isShowDivider: boolean = false;
//是否滑动
@Param scrollable: boolean = false;
//顶部中间视图是否居中 true居中 false 默认 居左
@Param isTabBarCenter: boolean = false;
//选中字体颜色
@Param selectFontColor: ResourceColor = $r('app.color.color_222222');
//滑动条是否显示
@Param isDividerVisible: boolean = true;
//更新
@Event changeFactory: (currentTabIndex: number, isShowDivider: boolean) => void = (currentTabIndex: number, isShowDivider: boolean) => {
}
aboutToAppear() { for (let index = 0; index < this.tabs.length; index++) { this.tabContentArr.push(index == 0 ? true : false) }}build() { Column() {
//切换
this.customTabBar()
//下划线
Divider()
.color($r('app.color.color_F0F0F0'))
.visibility(this.isShowDivider ? Visibility.Visible : Visibility.None)
//TabContent中的tabBar居中显示，所以暂时不用tabBar
Tabs({ controller: this.tabsController, barPosition: BarPosition.Start }) {
ForEach(this.tabs, (item: TabBarModel, index: number) => {
TabContent() {
//滑到哪个页面再加载,防止一块加载
if (this.currentTabIndex === index || this.tabContentArr) {
this.tabContentBuilder(item)
}
}
// .tabBar()
}, (item: string) => item)
}
.layoutWeight(1)
.barHeight(0) //隐藏tabBar
.scrollable(this.scrollable)
.onChange(index => {
this.tabContentArr = true
this.changeFactory(index,this.tabs.isShowDivider)
})
}.width(CommonConst.FULL_PARENT)
.backgroundColor($r('app.color.white'))
// .padding({ left: 12, right: 12 })}@Builder_TabContentBuilder($$: TabBarModel) { Text("tabContentBuilder:()=>{your @Builder View}")}@Builder
customTabBar() {
Row() {
//左边自定义
this.tabBarLeft()
//中间
CustomTabBarComp({
currentTabIndex: this.currentTabIndex,
tabs: this.tabs,
selectFontColor: this.selectFontColor,
isTabBarCenter: this.isTabBarCenter,
onTabClick: (index: number) => {
this.tabsController.changeIndex(index)
},
isDividerVisible: this.isDividerVisible
})
//右边自定义
this.tabBarRight()
}
.width(CommonConst.FULL_PARENT)
.height(44)
}
@BuilderbarLeft() {}@BuilderbarRight() {}}@ComponentV2export struct CustomTabBarComp {@Param currentTabIndex: number = 0;@Param tabs: Array<TabBarModel> = new Array<TabBarModel>()//选中字体颜色@Param selectFontColor: ResourceColor = $r('app.color.color_222222');@Param onTabClick: (index: number) => void = () => {};@Param isTabBarCenter: boolean = false;@Param isDividerVisible: boolean = true;build() { Row() { List() { ForEach(this.tabs, (item: TabBarModel, index: number) => { ListItem() { TabBarViewComp({ index: index, currentTabIndex: this.currentTabIndex, tabs: this.tabs, selectFontColor: this.selectFontColor, onTabClick: (index: number) => { this.onTabClick(index) }, isDividerVisible: this.isDividerVisible }) } }) } // .width(Constants.FULL_PARENT) .height(44) .listDirection(Axis.Horizontal) .alignListItem(ListItemAlign.Center) .scrollBar(BarState.Off) // .margin({ right: 8 }) } .layoutWeight(1) .justifyContent(this.isTabBarCenter ? FlexAlign.Center : FlexAlign.Start)}}
@ComponentV2
export struct TabBarViewComp {
@Param private index: number = 0
@Param currentTabIndex: number = 0
@Param tabs: Array<TabBarModel> = new Array<TabBarModel>()
//选中字体颜色
@Param selectFontColor: ResourceColor = $r('app.color.color_222222');
@Param onTabClick: (index: number) => void = () => {
};
@Param isDividerVisible: boolean = true;
build() {
Column() {
//右上角图片
Image(this.tabs.rightSrc)
.height(11)
.margin({ left: 46 }).visibility(this.tabs.isShowRightSrc ? Visibility.Visible : Visibility.None)
Text(this.tabs.name)
.fontSize(this.currentTabIndex == this.index ? 16 : 14)
.fontColor(this.currentTabIndex == this.index ? this.selectFontColor : $r('app.color.color_505050'))
.fontWeight(this.currentTabIndex == this.index ? FontWeight.Bold : FontWeight.Normal)
.margin({ top: this.tabs.isShowRightSrc ? 0 : 11 })
Divider()
.width(16)
.height(4)
.backgroundColor($r('app.color.colorPrimary'))
.margin({ top: 4, bottom: 4 })
.borderRadius(12)
.visibility(this.isDividerVisible && this.currentTabIndex == this.index ? Visibility.Visible : Visibility.Hidden)
}
.margin({ right: 15 })
.onClick(() => {
this.onTabClick(this.index)
})
}
}
[*]6、使用案例如下，多种样式的使用：
import { ToastUtil } from '@pura/harmony-utils'
import { ListWithTabBarView, TabBarModel } from 'uicomponents'
import { CommonConst } from 'utils'
import { GetFourStyleTabData, GetOneStyleTabData, GetThreeStyleTabData, GetTwoStyleTabData } from './TestModel'
@Preview
@ComponentV2
export struct TestTabBarView {
@Local currentTabIndex: number = 0
@Local isShowDivider: boolean = GetOneStyleTabData.isShowDivider
@Local currentTabIndex2: number = 0
@Local currentTabIndex3: number = 0
@Local currentTabIndex4: number = 0
build() {
NavDestination() {
Column() {
Text('第一种样式').text(Color.Red)
ListWithTabBarView({
currentTabIndex: this.currentTabIndex,
tabs: GetOneStyleTabData,
tabBarLeft: this.tabBarLeft,
tabBarRight: this.tabBarRight,
tabContentBuilder: this.tabContentBuilder,
isShowDivider: this.isShowDivider,
changeFactory: (currentTabIndex, isShowDivider) => {
this.currentTabIndex = currentTabIndex
this.isShowDivider = isShowDivider
}
}).height(80)
Text('第二种样式').text(Color.Pink)
ListWithTabBarView({
currentTabIndex: this.currentTabIndex2,
tabs: GetTwoStyleTabData,
tabBarLeft: this.tabBarLeft2,
tabBarRight: this.tabBarRight2,
tabContentBuilder: this.tabContentBuilder,
changeFactory: (currentTabIndex) => {
this.currentTabIndex2 = currentTabIndex
},
isTabBarCenter: true
}).height(80)
Text('第三种样式').text(Color.Blue)
ListWithTabBarView({
currentTabIndex: this.currentTabIndex,
tabs: GetThreeStyleTabData,
tabBarLeft: this.tabBarLeft3,
tabBarRight: this.tabBarRight3,
tabContentBuilder: this.tabContentBuilder,
isTabBarCenter: true,
changeFactory: (currentTabIndex) => {
this.currentTabIndex = currentTabIndex
}
}).height(80)
Text('第四种样式').text(Color.Grey)
ListWithTabBarView({
currentTabIndex: this.currentTabIndex4,
tabs: GetFourStyleTabData,
tabBarLeft: this.tabBarLeft4,
tabContentBuilder: (tab): void => this.tabContentBuilder(tab),
isShowDivider: true,
changeFactory: (currentTabIndex) => {
this.currentTabIndex4 = currentTabIndex
}
}).layoutWeight(1)
.height(80)
}
.width(CommonConst.FULL_PARENT)
.height(CommonConst.FULL_PARENT)
}
}
@Builder
tabBarLeft() {
Text().width(12)
}
@Builder
tabBarRight() {
Row({ space: 12 }) {
Image($r('app.media.app_icon'))
.width(24)
.visibility(this.currentTabIndex == 0 || this.currentTabIndex == 1 ? Visibility.Visible : Visibility.Hidden)
.onClick(() => {
ToastUtil.showToast('点了1')
})
Image($r('app.media.app_icon')).width(24).onClick(() => {
ToastUtil.showToast('点了')
})
}.padding({ right: 12 })
}
@Builder
tabContentBuilder($$: TabBarModel) {
Text($$.id)
}
@Builder
tabBarLeft2() {
Image($r('app.media.ic_arrow_left')).width(24)
.margin({ left: 12, right: 6 })
.onClick(() => {
ToastUtil.showToast('返回键')
// ZRouter.pop()
})
}
@Builder
tabBarRight2() {
Image($r('app.media.app_icon'))
.width(24)
.margin({ right: 12 })
.onClick(() => {
ToastUtil.showToast('点了')
})
}
@Builder
tabBarLeft3() {
Image($r('app.media.app_icon')).width(24).fillColor(Color.Black)
.margin({ left: 12, right: 20 })
.onClick(() => {
ToastUtil.showToast('设置')
})
}
@Builder
tabBarRight3() {
Image(this.currentTabIndex == 1 ? $r('app.media.ic_next') : $r('app.media.ic_local_search'))
.width(24)
.margin({ right: 12 })
.visibility(this.currentTabIndex != 2 ? Visibility.Visible : Visibility.Hidden)
.onClick(() => {
ToastUtil.showToast(this.currentTabIndex == 1 ? '点了1' : '搜索')
})
}
@Builder
tabBarLeft4() {
Text().width(12)
}
}
@Extend(Text)
function text(color: ResourceColor) {
.height(44).width(CommonConst.FULL_PARENT).fontColor(Color.White).backgroundColor(color)
}
以往系列文章
[*] 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 模块化底子篇》
[*]《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 构建底子特性层》
[*]《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 构建公共本领层》
[*]《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— Tabs底部导航栏》
[*]《探索 HarmonyOS NEXT (5.0)：开启构建模块化项目架构奇幻之旅 —— 动态路由 ZRouter：引领高效模块通信的智慧中枢》
[*]《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 ——第三方库的使用：网络哀求RCP、二次封装上下拉革新、弹窗》
[*]HarmonyOS NEXT：模块化项目 ——修改应用图标+启动页等
[*]HarmonyOSNext模块化设计实践：打造简洁高效的登录注册页面
若本文对您稍有帮助，诚望您不吝点赞，多谢。
有兴趣的同砚可以点击查看源码
[*]gitee：https://gitee.com/jiaojiaoone/explore-harmony-next/tree/case%2Fwanandroid/
[*]github：https://github.com/JasonYinH/ExploreHarmonyNext.git
接待加我微信一起交换：+V：yinshiyuba
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]