鸿蒙应用开发-DevEco Studio 模板体验（一）

具体步骤可查看原文视频

显示效果：

布局中的代码

<?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:icon"                    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>

显示效果：

布局中的代码

<?xml version="1.0" encoding="utf-8"?><DependentLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:id="$+id:root_layout"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:orientation="vertical">    <DirectionalLayout        ohos:id="$+id:background"        ohos:height="match_parent"        ohos:width="match_parent"        ohos:align_parent_top="true"        ohos:background_element="$color:color_background"/>    <DirectionalLayout        ohos:id="$+id:appBar"        ohos:height="match_content"        ohos:width="match_parent"        ohos:align_parent_top="true"        ohos:end_padding="$float:max_padding_appBar"        ohos:layout_direction="locale"        ohos:orientation="horizontal"        ohos:start_padding="$float:max_padding_start">        <DirectionalLayout            ohos:id="$+id:appBar_leftPart"            ohos:height="$float:height_backButton_touchTarget"            ohos:width="0vp"            ohos:alignment="center"            ohos:orientation="horizontal"            ohos:weight="1">            <Image                ohos:id="$+id:appBar_backButton"                ohos:height="$float:height_appBar_Buttons"                ohos:width="$float:width_appBar_buttons"                ohos:image_src="$graphic:ic_back"/>            <Text                ohos:id="$+id:appBar_userName"                ohos:height="match_parent"                ohos:width="match_parent"                ohos:alpha="0"                ohos:left_margin="$float:leftMargin_userName"                ohos:text="$string:title_contactsDetail"                ohos:text_size="$float:textSize_userName"/>        </DirectionalLayout>        <DirectionalLayout            ohos:id="$+id:appBar_rightPart"            ohos:height="match_parent"            ohos:width="0vp"            ohos:alignment="vertical_center|right"            ohos:orientation="horizontal"            ohos:start_margin="$float:start_margin_appBar"            ohos:weight="1">            <DirectionalLayout                ohos:id="$+id:appBar_button1_touchTarget"                ohos:height="$float:height_touchTarget"                ohos:width="$float:width_touchTarget"                ohos:alignment="center">                <Image                    ohos:id="$+id:appBar_button1"                    ohos:height="$float:height_appBar_Buttons"                    ohos:width="$float:width_appBar_buttons"                    ohos:image_src="$graphic:ic_add"/>            </DirectionalLayout>            <DirectionalLayout                ohos:id="$+id:appBar_button2_touchTarget"                ohos:height="$float:height_touchTarget"                ohos:width="$float:width_touchTarget"                ohos:alignment="center">                <Image                    ohos:id="$+id:appBar_button2"                    ohos:height="$float:height_appBar_Buttons"                    ohos:width="$float:width_appBar_buttons"                    ohos:image_src="$graphic:ic_add"/>            </DirectionalLayout>            <DirectionalLayout                ohos:id="$+id:appBar_button3_touchTarget"                ohos:height="$float:height_touchTarget"                ohos:width="$float:width_touchTarget"                ohos:alignment="center">                <Image                    ohos:id="$+id:appBar_button3"                    ohos:height="$float:height_appBar_Buttons"                    ohos:width="$float:width_appBar_buttons"                    ohos:image_src="$graphic:ic_more"/>            </DirectionalLayout>        </DirectionalLayout>    </DirectionalLayout>    <ScrollView        ohos:id="$+id:contacts_detail_scroll"        ohos:height="match_parent"        ohos:width="match_parent"        ohos:below="$id:appBar"        ohos:bottom_margin="$float:height_bottom_tab">        <DependentLayout            ohos:id="$+id:contacts_detail"            ohos:height="match_content"            ohos:width="match_parent"            ohos:orientation="vertical">            <DependentLayout                ohos:id="$+id:contacts_detail_upperCard"                ohos:height="match_content"                ohos:width="match_parent"                ohos:align_parent_top="true"                ohos:background_element="$graphic:card_background"                ohos:left_padding="$float:max_padding_start"                ohos:orientation="vertical"                ohos:right_padding="$float:max_padding_end"                ohos:top_margin="$float:topMargin_contactsDetail_upperCard">                <ListContainer                    ohos:id="$+id:contacts_detail_upperCard_list"                    ohos:height="0vp"                    ohos:width="match_parent"                    ohos:below="$+id:contacts_detail_title"/>                <Text                    ohos:id="$+id:contacts_detail_title"                    ohos:height="match_content"                    ohos:width="match_parent"                    ohos:align_parent_top="true"                    ohos:text="$string:title_contactsDetail"                    ohos:text_alignment="horizontal_center"                    ohos:text_size="$float:textSize_contactsDetail_title"                    ohos:top_margin="$float:topMargin_contactsDetail_title"/>            </DependentLayout>            <Image                ohos:id="$+id:contacts_detail_profile"                ohos:height="$float:height_contacts_profile"                ohos:width="$float:width_contacts_profile"                ohos:align_parent_top="true"                ohos:alpha="1"                ohos:background_element="$media:profile"                ohos:center_in_parent="true"                ohos:top_margin="$float:topMargin_contacts_profile"/>        </DependentLayout>    </ScrollView>    <DirectionalLayout        ohos:id="$+id:bottom_tab"        ohos:height="$float:height_bottom_tab"        ohos:width="match_parent"        ohos:align_parent_bottom="true"        ohos:alignment="vertical_center"        ohos:background_element="$graphic:bottom_tab_background"        ohos:left_padding="$float:max_padding_start"        ohos:right_padding="$float:max_padding_end">        <DirectionalLayout            ohos:id="$+id:bottom_tabMenu"            ohos:height="match_content"            ohos:width="match_parent"            ohos:orientation="horizontal"/>    </DirectionalLayout></DependentLayout>

显示效果：

可以上下滑动查看

布局中的代码

<?xml version="1.0" encoding="utf-8"?><DirectionalLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:background_element="$color:colorAppBackground"    ohos:orientation="vertical">    <!-- Title part-->    <DirectionalLayout        xmlns:ohos="http://schemas.huawei.com/res/ohos"        ohos:height="$float:titlePartHeight"        ohos:width="match_parent"        ohos:background_element="$color:colorAppBackground"        ohos:orientation="vertical">        <DependentLayout            xmlns:ohos="http://schemas.huawei.com/res/ohos"            ohos:height="$float:titlePartIconDivHeight"            ohos:width="match_parent">            <DependentLayout                xmlns:ohos="http://schemas.huawei.com/res/ohos"                ohos:id="$+id:title_area_menu"                ohos:height="$float:titlePartIconHotAreaHeight"                ohos:width="$float:titlePartIconHotAreaWidth"                ohos:align_parent_right="true"                ohos:center_in_parent="true"                ohos:right_margin="$float:titlePartIconHotAreaRightMargin">                <Image                    ohos:id="$+id:title_area_menu_icon"                    ohos:height="$float:titlePartIconHeight"                    ohos:width="$float:titlePartIconWidth"                    ohos:center_in_parent="true"                    ohos:image_src="$graphic:icon_more"/>            </DependentLayout>            <DependentLayout                xmlns:ohos="http://schemas.huawei.com/res/ohos"                ohos:id="$+id:title_area_add"                ohos:height="$float:titlePartIconHotAreaHeight"                ohos:width="$float:titlePartIconHotAreaWidth"                ohos:center_in_parent="true"                ohos:left_of="$id:title_area_menu">                <Image                    ohos:id="$+id:title_area_add_icon"                    ohos:height="$float:titlePartIconHeight"                    ohos:width="$float:titlePartIconWidth"                    ohos:center_in_parent="true"                    ohos:image_src="$graphic:icon_add"/>            </DependentLayout>            <DependentLayout                xmlns:ohos="http://schemas.huawei.com/res/ohos"                ohos:id="$+id:title_area_add1"                ohos:height="$float:titlePartIconHotAreaHeight"                ohos:width="$float:titlePartIconHotAreaWidth"                ohos:center_in_parent="true"                ohos:left_of="$id:title_area_add">                <Image                    ohos:id="$+id:title_area_add_icon1"                    ohos:height="$float:titlePartIconHeight"                    ohos:width="$float:titlePartIconWidth"                    ohos:center_in_parent="true"                    ohos:image_src="$graphic:icon_add"/>            </DependentLayout>        </DependentLayout>        <Text            ohos:id="$+id:title_text"            ohos:height="$float:titlePartTextAreaHeight"            ohos:width="match_parent"            ohos:bottom_margin="$float:titlePartTextAreaBottomMargin"            ohos:left_margin="$float:titlePartTextAreaLeftMargin"            ohos:right_margin="$float:titlePartTextAreaRightMargin"            ohos:text="$string:title_text"            ohos:text_alignment="vertical_center"            ohos:text_color="$color:colorAppbarTitle"            ohos:text_font="medium"            ohos:text_size="$float:textSizeHeadline6"            ohos:top_margin="$float:titlePartTextAreaTopMargin"/>    </DirectionalLayout>    <ListContainer        ohos:id="$+id:list_view"        ohos:height="match_content"        ohos:width="match_parent"        ohos:bottom_padding="$float:listContainerBottomPadding"        ohos:left_margin="$float:singleCardViewLeftMargin"        ohos:right_margin="$float:singleCardViewRightMargin"/></DirectionalLayout>

完整代码地址：

gitee.com/jltfcloudcn…

原文链接：developer.huawei.com/consumer/cn…

原作者：蛟龙腾飞