HarmonyOS鸿蒙Next应用开发--自定义标题栏实战

HarmonyOS鸿蒙Next应用开发–自定义标题栏实战 在Harmony开发过程中，如果对系统标题栏感到不满意，可以进行自行修改设计。

配置文件（config.json）修改,在module下添加下面内容：

"module": {
    ......,
    "metaData":{
        "customizeData":[
            {
                "name": "hwc-theme",
                "value": "androidhwext:style/Theme.Emui.NoTitleBar",
                "extra":""
            }
        ]
    },
    ......
},

该内容是用于删除标题栏。

然后可以在页面中自定义标题栏，示例如下：

<div>
    <div style="display: flex;flex-direction: column;">
        <div style="
            background-color: red;
            height: 82px;
            width: 100%;
            align-items: flex-end;
            ">
            <text style="
                margin-left: 14px;
                margin-bottom: 4px;
                color: white;
                font-size: 22px ;
                ">标题</text>
        </div>
    </div>
</div>

效果如图:

图片4.png

完整代码地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/MYstatus


更多关于HarmonyOS鸿蒙Next应用开发--自定义标题栏实战的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

自定义就是我努力的方向！

更多关于HarmonyOS鸿蒙Next应用开发--自定义标题栏实战的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，自定义标题栏可以通过AbilitySlice的setTitleBar方法实现。首先，创建一个自定义布局文件custom_title_bar.xml，定义标题栏的样式和控件。然后在AbilitySlice的onStart方法中，使用LayoutScatter加载自定义布局，并通过setTitleBar方法将其设置为标题栏。最后，通过findComponentById获取控件并设置事件监听器，实现交互功能。这种方式可以灵活定制标题栏的外观和行为，满足不同应用场景的需求。

回到顶部