显示效果：

布局中的代码

<?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/jump_to/tree/master/mbty5