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

详细步骤可查看下面三个视频：

视频一

视频二

视频三

显示效果：

可以左右滑动

布局中的代码

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:background_element="$graphic:main_ability_title_background"
    ohos:orientation="vertical">

    <include
        ohos:id="$id:app_bar"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:layout="$layout:app_bar_layout"/>

    <PageSlider
        ohos:id="$+id:page_view"
        ohos:height="match_content"
        ohos:width="match_parent"/>

    <PageSliderIndicator
        ohos:id="$+id:page_indicator"
        ohos:height="$float:page_indicator_height"
        ohos:width="match_parent"
        ohos:bottom_margin="$float:margin_page_slider_indicator"
        ohos:layout_alignment="center"
        ohos:top_margin="$float:margin_page_slider_indicator"/>

    <ListContainer
        ohos:id="$+id:list_view"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:background_element="$graphic:item_background"
        ohos:top_margin="$float:breadth_common"/>

</DirectionalLayout>

显示效果：

点击其中任何的一条信息都可以进入下一个页面

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:parent_layout"
    ohos:height="match_parent"
    ohos:width="match_parent">

    <ScrollView
        ohos:height="match_parent"
        ohos:width="match_parent">

        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:bottom_padding="70vp"
            ohos:orientation="vertical">

            <DirectionalLayout
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:alignment="vertical_center"
                ohos:orientation="horizontal">

                <Image
                    ohos:id="$+id:image"
                    ohos:height="50vp"
                    ohos:width="50vp"
                    ohos:image_src="$media:huawei"
                    ohos:layout_alignment="left"
                    ohos:left_margin="10vp"
                    ohos:scale_mode="stretch"/>

                <Text
                    ohos:id="$+id:title_icon"
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:text="$string:title"
                    ohos:text_size="20fp"
                    ohos:weight="1"/>

                <Text
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:right_margin="10vp"
                    ohos:text="$string:read"
                    ohos:text_size="10fp"/>

                <Text
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:right_margin="20vp"
                    ohos:text="$string:like"
                    ohos:text_size="10fp"/>
            </DirectionalLayout>

            <Text
                ohos:id="$+id:title_text"
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:left_margin="20vp"
                ohos:max_text_lines="4"
                ohos:multiple_lines="true"
                ohos:right_margin="20vp"
                ohos:text="$string:original_title"
                ohos:text_color="#000000"
                ohos:text_size="18fp"
                ohos:top_margin="10vp"/>

            <Text
                ohos:id="$+id:title_content"
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:left_margin="20vp"
                ohos:multiple_lines="true"
                ohos:right_margin="20vp"
                ohos:text_alignment="center_horizontal"
                ohos:text_color="#708090"
                ohos:text_size="16fp"
                ohos:top_margin="5vp"/>

            <DirectionalLayout
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:orientation="horizontal">

                <Image
                    ohos:id="$+id:image_content1"
                    ohos:height="100vp"
                    ohos:width="0vp"
                    ohos:image_src="$media:content"
                    ohos:layout_alignment="center"
                    ohos:left_margin="20vp"
                    ohos:right_margin="2vp"
                    ohos:top_margin="10vp"
                    ohos:weight="1"/>

                <Image
                    ohos:id="$+id:image_content2"
                    ohos:height="100vp"
                    ohos:width="0vp"
                    ohos:image_src="$media:news_big_5g"
                    ohos:layout_alignment="center"
                    ohos:left_margin="10vp"
                    ohos:right_margin="2vp"
                    ohos:top_margin="10vp"
                    ohos:weight="1"/>

                <Image
                    ohos:id="$+id:image_content3"
                    ohos:height="100vp"
                    ohos:width="0vp"
                    ohos:image_src="$media:content_news"
                    ohos:layout_alignment="center"
                    ohos:left_margin="2vp"
                    ohos:right_margin="20vp"
                    ohos:top_margin="10vp"
                    ohos:weight="1"/>
            </DirectionalLayout>

        </DirectionalLayout>

    </ScrollView>

    <Component
        ohos:height="0.5vp"
        ohos:width="match_parent"
        ohos:above="$+id:bottom_layout"
        ohos:background_element="#EAEAEC"
        />

    <DirectionalLayout
        ohos:id="$+id:bottom_layout"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:align_parent_bottom="true"
        ohos:alignment="vertical_center"
        ohos:background_element="#ffffff"
        ohos:left_padding="20vp"
        ohos:orientation="horizontal"
        ohos:right_padding="20vp"
        >

        <TextField
            ohos:id="$+id:text_file"
            ohos:height="30vp"
            ohos:width="160vp"
            ohos:background_element="$graphic:corner_bg_comment"
            ohos:hint="$string:comment"
            ohos:left_padding="5vp"
            ohos:right_padding="10vp"
            ohos:text_alignment="vertical_center"
            ohos:text_size="15vp"/>

        <Image
            ohos:id="$+id:button1"
            ohos:height="20vp"
            ohos:width="20vp"
            ohos:image_src="$media:message_icon"
            ohos:left_margin="20vp"/>

        <Image
            ohos:id="$+id:button2"
            ohos:height="20vp"
            ohos:width="20vp"
            ohos:image_src="$media:collect_icon"
            ohos:left_margin="20vp"/>

        <Image
            ohos:id="$+id:button3"
            ohos:height="20vp"
            ohos:width="20vp"
            ohos:image_src="$media:like_icon"
            ohos:left_margin="20vp"/>

        <Image
            ohos:id="$+id:button4"
            ohos:height="20vp"
            ohos:width="20vp"
            ohos:image_src="$media:share_icon"
            ohos:left_margin="20vp"/>


    </DirectionalLayout>

</DependentLayout>

显示效果：

放置一些内容 可以上下滑动

布局中的代码

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="$float:list_item_height"
    ohos:width="match_parent"
    ohos:bottom_padding="$float:list_item_bottom_padding"
    ohos:top_padding="$float:list_item_top_padding"
    >

    <DirectionalLayout
        ohos:id="$+id:head_image_layout"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:right_margin="$float:list_item_profile_picture_right_margin"
        ohos:vertical_center="true"
        >

        <Image
            ohos:id="$+id:list_left_image"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:image_src="$media:ori_star"
            />
    </DirectionalLayout>

    <DirectionalLayout
        ohos:id="$+id:left_layout"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:bottom_margin="$float:list_item_double_line_bottom_margin"
        ohos:end_of="$id:head_image_layout"
        ohos:orientation="vertical"
        ohos:vertical_center="true"
        >

        <Text
            ohos:id="$+id:list_main_text"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:alpha="0.9"
            ohos:multiple_lines="true"
            ohos:text="$string:Double_line_list_item"
            ohos:text_alignment="vertical_center|left"
            ohos:text_size="$float:list_item_main_text_size"
            />

        <Text
            ohos:id="$+id:list_aux_text"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:alpha="0.6"
            ohos:multiple_lines="true"
            ohos:text="$string:Auxiliary_text"
            ohos:text_alignment="vertical_center|left"
            ohos:text_size="$float:list_item_aux_text_size"
            />

    </DirectionalLayout>

    <DirectionalLayout
        ohos:id="$+id:right_layout"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:alignment="right"
        ohos:end_of="$id:left_layout"
        ohos:orientation="horizontal"
        ohos:vertical_center="true"
        >

        <Text
            ohos:id="$+id:list_right_text"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:alpha="0.6"
            ohos:multiple_lines="true"
            ohos:right_margin="4vp"
            ohos:text="$string:Right_text"
            ohos:text_size="$float:list_item_right_text_size"
            />

        <Image
            ohos:id="$+id:list_right_image"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:image_src="$media:right_arrow"
            ohos:layout_alignment="vertical_center"
            />

    </DirectionalLayout>

    <Component
        ohos:height="$float:list_item_divider_height"
        ohos:width="match_parent"
        ohos:alpha="0.3"
        ohos:background_element="$graphic:item_divider"
        ohos:below="$id:left_layout"
        ohos:end_of="$id:head_image_layout"
        />

</DependentLayout>

完整代码地址：

https://gitee.com/jltfcloudcn...

原文链接：https://developer.huawei.com/...
原作者：蛟龙腾飞