HarmonyOS 鸿蒙Next 自定义页面顶部标题栏组件，可动态设置标题、左右操作按钮icon及点击事件
HarmonyOS 鸿蒙Next 自定义页面顶部标题栏组件，可动态设置标题、左右操作按钮icon及点击事件 使用自己封装的标题栏容器组件，可以满足页面常用的顶部标题栏功能及样式的需求。
常见的标题栏
-
返回按钮+标题
-
返回按钮+标题+功能按钮
组件TitleContainer.ets代码如下：
import router from '@ohos.router'
@Preview
@Component
export default struct TitleContainer {
// 返回按钮图片
private backImg: string | Resource = $r("app.media.icon_cancel");
// 返回按钮点击事件
private backFunc?: () => void;
// 标题
private title: string | Resource = "标题";
// 关闭按钮点击事件
@BuilderParam closeHandle?: () => void;
build() {
Row() {
// 返回按钮
Button() {
Image(this.backImg == null ? $r("app.media.icon_back") : this.backImg)
.objectFit(ImageFit.Fill);
}
.width(24)
.height(24)
.backgroundColor("#00000000")
.onClick(() => {
this.backFunc ? this.backFunc : router.back();
});
// 标题
Text(this.title)
.fontSize(20)
.lineHeight(28)
.fontColor("#182431")
.fontWeight(FontWeight.Bold)
.margin({ left: 16 });
// 占位
Blank()
if (this.closeHandle) {
this.closeHandle();
}
}
.width("100%")
.height(56)
.padding({
left: 24,
right: 24
})
}
}使用组件的页面Home.ets代码如下：
import TitleContainer from '../components/TitleContainer'
@Entry
@Component
struct Home {
@State message: string = '主页面'
build() {
Row() {
Column() {
TitleContainer({
title: "Hello World",
closeHandle: () => {
} })
.backgroundColor(Color.White)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.fontColor(Color.White)
.margin({ top: 50 })
}
.width('100%')
}
.height('100%')
.alignItems(VerticalAlign.Top)
.backgroundColor(Color.Gray)
}
}预览效果如下：
组件预览
使用组件的页面预览
更多关于HarmonyOS 鸿蒙Next 自定义页面顶部标题栏组件，可动态设置标题、左右操作按钮icon及点击事件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
HarmonyOS Next中，自定义页面顶部标题栏组件可以通过NavigationBar和NavigationBarItem来实现。NavigationBar是顶部导航栏的容器，而NavigationBarItem用于定义导航栏中的具体项，如标题、左右操作按钮等。
要动态设置标题，可以通过NavigationBar的title属性进行赋值。例如：
let navigationBar = new NavigationBar();
navigationBar.title = "动态标题";对于左右操作按钮的icon和点击事件，可以通过NavigationBarItem来定义。首先创建一个Resource对象来指定icon资源，然后将其赋值给NavigationBarItem的icon属性。点击事件可以通过onClick属性来绑定。例如：
let leftButton = new NavigationBarItem();
leftButton.icon = $r('app.media.left_icon');
leftButton.onClick = () => {
// 处理点击事件
};
let rightButton = new NavigationBarItem();
rightButton.icon = $r('app.media.right_icon');
rightButton.onClick = () => {
// 处理点击事件
};
navigationBar.leftItems = [leftButton];
navigationBar.rightItems = [rightButton];通过以上方式，可以实现动态设置标题、左右操作按钮的icon及点击事件。NavigationBar组件支持灵活的布局和样式调整，开发者可以根据具体需求进行自定义。
更多关于HarmonyOS 鸿蒙Next 自定义页面顶部标题栏组件，可动态设置标题、左右操作按钮icon及点击事件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
