标签：DevEco 鸿蒙 text height width Studio ohos id match
显示效果：
可以左右滑动
布局中的代码
<?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
原文链接：https://developer.huawei.com/consumer/cn/forum/topic/0202560263510610138?fid=0101303901040230869
原作者：蛟龙腾飞
标签：DevEco,鸿蒙,text,height,width,Studio,ohos,id,match 来源： https://blog.51cto.com/u_14772288/2781736
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。