HarmonyOSAPP开发about feature模板体验分享 原创

一、效果呈现

项目名称:  jltf_template

项目语言:  JAVA

module：about feature

体验模板： about feature

工具：deveco studio

效果如下

 
 

二、主要流程与核心代码

第一步 建立项目

新建一个java的应用项目

然后构建完成项目后在jltf_template下new->module

  

 
 
选择phone下的About Feature模板

 
 

第二步 修改数据

 
改变页面的参数可以通过修改参数文档以及abilitySlice中传到页面的参数进行实现

 
 
修改图片可以将图片添加到media文件同时修改layout中ability_main中的图片地址

 
第三步

登录你的账号然后启动模拟器即可实现效果

部分代码

<?xml version="1.0" encoding="utf-8"?>

<DependentLayout

    xmlns:ohos="http://schemas.huawei.com/res/ohos"

    ohos:id="$+id:ability_main"

    ohos:height="match_parent"

    ohos:width="match_parent"

    ohos:orientation="vertical">

<!--    头部返回按钮   -->

    <DirectionalLayout

        ohos:id="$+id:appBar"

        ohos:height="$float:height_appBar"

        ohos:width="match_parent"

        ohos:orientation="horizontal">

        <DirectionalLayout

            ohos:id="$+id:appBar_backButton_touchTarget"

            ohos:height="$float:height_appBar_backButton_touchTarget"

            ohos:width="$float:width_appBar_backButton_touchTarget"

            ohos:alignment="center"

            ohos:left_margin="$float:leftMargin_appBar_backButton_touchTarget">

            <Image

                ohos:id="$+id:appBar_backButton"

                ohos:height="$float:size_appBar_backButton"

                ohos:width="$float:size_appBar_backButton"

                ohos:image_src="$graphic:back"/>

        </DirectionalLayout>

        <Text

            ohos:id="$+id:appBar_title"

            ohos:height="match_parent"

            ohos:width="match_content"

            ohos:left_margin="$float:leftMargin_appBar_title"

            ohos:text="$string:title"

            ohos:text_size="$float:textSize_title"/>

    </DirectionalLayout>

<!--    图标部分   -->

    <ScrollView

        ohos:id="$+id:aboutPageScrollView"

        ohos:height="match_parent"

        ohos:width="match_parent"

        ohos:below="$id:appBar">

        <DependentLayout

            ohos:id="$+id:aboutPageMain"

            ohos:height="match_content"

            ohos:width="match_parent"

            ohos:min_height="$float:aboutPage_minHeight"

            ohos:orientation="vertical">

            <DirectionalLayout

                ohos:id="$+id:aboutPageUpperPart"

                ohos:height="$float:height_aboutPage_upperPart"

                ohos:width="match_parent"

                ohos:align_parent_top="true"

                ohos:alignment="horizontal_center"

                ohos:orientation="vertical">

                <!--                TODO: Set the app icon here-->

                <Image

                    ohos:id="$+id:aboutPageIcon"

                    ohos:height="$float:size_aboutPage_iconBackground"

                    ohos:width="$float:size_aboutPage_iconBackground"

                    ohos:alignment="center"

                    ohos:image_src="$media:jltf"

                    ohos:top_margin="$float:topMargin_aboutPage_iconBackground"/>

                <Text

                    ohos:id="$+id:aboutPageTitlePrimary"

                    ohos:height="match_content"

                    ohos:width="match_content"

                    ohos:text="$string:aboutPage_title_primary"

                    ohos:text_color="$color:color_aboutPage_title_primary"

                    ohos:text_size="$float:size_aboutPage_title_primary"

                    ohos:top_margin="$float:topMargin_aboutPage_title_primary"/>

                <Text

                    ohos:id="$+id:aboutPageTitleSecondary"

                    ohos:height="match_content"

                    ohos:width="match_content"

                    ohos:text="$string:aboutPage_title_secondary"

                    ohos:text_color="$color:color_aboutPage_title_secondary"

                    ohos:text_size="$float:size_aboutPage_title_secondary"/>

            </DirectionalLayout>

            <DirectionalLayout

                ohos:id="$+id:aboutPageLowerPart"

                ohos:height="match_content"

                ohos:width="match_parent"

                ohos:background_element="$graphic:stacklayout_background"

                ohos:below="$id:aboutPageUpperPart"

                ohos:left_margin="$float:card_margin_start"

                ohos:orientation="vertical"

                ohos:right_margin="$float:card_margin_end"/>

            <!--底部-->

            <DirectionalLayout

                ohos:id="$+id:aboutPageBottomPart"

                ohos:height="match_content"

                ohos:width="match_parent"

                ohos:align_parent_bottom="true"

                ohos:alignment="horizontal_center"

                ohos:below="$+id:aboutPageLowerPart"

                ohos:bottom_padding="$float:default_padding_bottom_fixed"

                ohos:left_padding="$float:maxPadding_start"

                ohos:orientation="vertical"

                ohos:right_padding="$float:maxPadding_end"

                ohos:top_padding="$float:default_padding_top_fixed">

                <Text

                    ohos:id="$+id:openSourceNoticeText"

                    ohos:height="match_content"

                    ohos:width="match_parent"

                    ohos:layout_direction="locale"

                    ohos:text_alignment="center"

                    ohos:text_size="$float:textSize_body3"/>

                <Text

                    ohos:id="$+id:protocolPrivacyText"

                    ohos:height="match_content"

                    ohos:width="match_parent"

                    ohos:layout_direction="locale"

                    ohos:multiple_lines="true"

                    ohos:text_alignment="center"

                    ohos:text_size="$float:textSize_body3"/>

                <Text

                    ohos:id="$+id:copyrightText"

                    ohos:height="match_content"

                    ohos:width="match_parent"

                    ohos:layout_direction="locale"

                    ohos:text="$string:copyright_text"

                    ohos:text_alignment="center"

                    ohos:text_color="$color:textColor_secondary"

                    ohos:text_size="$float:textSize_body3"/>

                <Text

                    ohos:id="$+id:technicalSupportText"

                    ohos:height="match_content"

                    ohos:width="match_parent"

                    ohos:layout_direction="locale"

                    ohos:text="$string:technicalSupport_text"

                    ohos:text_alignment="center"

                    ohos:text_color="$color:textColor_secondary"

                    ohos:text_size="$float:textSize_body3"/>

            </DirectionalLayout>

        </DependentLayout>

    </ScrollView>

</DependentLayout>
完整代码地址:https://gitee.com/jltfcloudcn/jump_to/tree/master/aboutFeature