AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

HarmonyOS学习路之开发篇—Java UI框架(DependentLayout)

2023-08-05 196
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： DependentLayout是Java UI框架里的一种常见布局。与DirectionalLayout相比，拥有更多的排布方式，每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置。

DependentLayout

DependentLayout是Java UI框架里的一种常见布局。与DirectionalLayout相比，拥有更多的排布方式，每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置。


c3bd655ff0d44a8f5f996c92fbe3243b.png


支持的XML属性DependentLayout的共有XML属性继承自：Component

DependentLayout的共有XML属性继承自：Component


DependentLayout所包含组件可支持的XML属性见下表：

image.png

image.png

image.png

image.png

image.png

image.png

image.png

排列方式

DependentLayout的排列方式是相对于其他同级组件或者父组件的位置进行布局。


相对于同级组件的对齐

根据位置对齐

left_of、right_of、start_of、end_of、above和below均相对于同级组件的不同位置进行对齐。例如left_of对齐方式，即将右边缘与同级组件的左边缘对齐，对齐后位于同级组件的左侧。其他几种对齐方式遵循的逻辑与此相同，需要注意的是start_of和end_of会跟随当前布局起始方向变化。

以上几种不同对齐方式的效果如下图所示：


558852ee27e9c79f9ee75f49eb29ee97.png



<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="500vp"
    ohos:width="500vp"
    ohos:background_element="#EDEDED">
    <Text
        ohos:id="$+id:text_center"
        ohos:height="210vp"
        ohos:width="210vp"
        ohos:background_element="#878787"
        ohos:center_in_parent="true"
        ohos:text="center"
        ohos:text_alignment="center"
        ohos:text_size="20fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_left"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:left_of="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:text="left_of"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_right"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:right_of="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:text="right_of"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_above"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:above="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:text="above"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_below"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:below="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:text="below"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
</DependentLayout>


根据边对齐

align_left、 align_right、 align_top、 align_bottom、 align_start和align_end都是与同级组件的相同边对齐。例如align_left对齐方式，即将当前组件与同级组件的左边缘对齐。其他几种对齐方式遵循的逻辑与此相同，需要注意的是align_start和align_end会跟随当前布局起始方向变化。


以上几种不同对齐方式的效果如下图所示：




acc29999c2dca49d4ec03ee1159534d1.png 
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="500vp"
    ohos:width="500vp"
    ohos:background_element="#EDEDED">
    <Text
        ohos:id="$+id:text_center"
        ohos:height="210vp"
        ohos:width="210vp"
        ohos:background_element="#878787"
        ohos:center_in_parent="true"
        ohos:text="center"
        ohos:text_alignment="center"
        ohos:text_size="20fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_top"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_top="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:text="align_top"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_bottom"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_bottom="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:text="align_bottom"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_left"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_left="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:text="align_left"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_right"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_right="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:text="align_right"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
</DependentLayout>


组合属性对齐方式

在逻辑不冲突的情况下，开发者可以组合使用多种对齐方式来进行布局。以下为一些常用的对齐方式效果图

f4c13a6c9c599870a9c080ef70b973eb.png



<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="500vp"
    ohos:width="500vp"
    ohos:background_element="#EDEDED">
    <Text
        ohos:id="$+id:text_center"
        ohos:height="210vp"
        ohos:width="210vp"
        ohos:background_element="#878787"
        ohos:center_in_parent="true"
        ohos:text="center"
        ohos:text_alignment="center"
        ohos:text_size="20fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_left_and_above"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:left_of="$id:text_center"
        ohos:above="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="left_of and above"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_left_and_below"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:left_of="$id:text_center"
        ohos:below="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="left_of and below"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_right_and_above"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:right_of="$id:text_center"
        ohos:above="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="right_of and above"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_right_and_below"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:right_of="$id:text_center"
        ohos:below="$id:text_center"
        ohos:background_element="#FF9912"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="right_of and below"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_top_and_left"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_top="$id:text_center"
        ohos:left_of="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_top and left"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_top_and_right"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_top="$id:text_center"
        ohos:right_of="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_top and right"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_bottom_and_left"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_bottom="$id:text_center"
        ohos:left_of="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_bottom and left"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_bottom_and_right"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_bottom="$id:text_center"
        ohos:right_of="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_bottom and right"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_left_and_above"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_left="$id:text_center"
        ohos:above="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_left and above"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_left_and_below"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_left="$id:text_center"
        ohos:below="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_left and below"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_right_and_above"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_right="$id:text_center"
        ohos:above="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_right and above"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:id="$+id:text_align_right_and_below"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:align_right="$id:text_center"
        ohos:below="$id:text_center"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_right and below"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
</DependentLayout>


相对于父级组件的对齐

单个属性对齐方式



7d93ad79ffb8ed32690feca165bb3683.png

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="500vp"
    ohos:width="500vp"
    ohos:background_element="#878787">
    <Text
        ohos:height="100vp"
        ohos:width="match_content"
        ohos:align_parent_left="true"
        ohos:background_element="#FF9912"
        ohos:padding="12vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_left"
        ohos:text_alignment="vertical_center"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_parent_right="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_right"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_parent_top="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_top"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_parent_bottom="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_bottom"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:center_in_parent="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="center_in_parent"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:horizontal_center="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="horizontal_center"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:vertical_center="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="vertical_center"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
</DependentLayout>


组合属性对齐方式


350cc839e04e3da6e6bc9136a45cc8b1.png


<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="500vp"
    ohos:width="640vp"
    ohos:background_element="#878787">
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:center_in_parent="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="center_in_parent"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:align_parent_left="true"
        ohos:align_parent_top="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_left and align_parent_top"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:align_parent_left="true"
        ohos:align_parent_bottom="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_left and align_parent_bottom"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:align_parent_right="true"
        ohos:align_parent_top="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_right and align_parent_top"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:align_parent_right="true"
        ohos:align_parent_bottom="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="align_parent_right and align_parent_bottom"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:horizontal_center="true"
        ohos:align_parent_top="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="horizontal_center and align_parent_top"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:horizontal_center="true"
        ohos:align_parent_bottom="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="horizontal_center and align_parent_bottom"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:vertical_center="true"
        ohos:align_parent_left="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="vertical_center and align_parent_left"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
    <Text
        ohos:height="match_content"
        ohos:width="190vp"
        ohos:vertical_center="true"
        ohos:align_parent_right="true"
        ohos:background_element="#228B22"
        ohos:padding="8vp"
        ohos:multiple_lines="true"
        ohos:text="vertical_center and align_parent_right"
        ohos:text_size="18fp"
        ohos:text_color="#FFFFFF"/>
</DependentLayout>


场景示例

使用DependentLayout可以轻松实现内容丰富的布局。



9e09a0bc7b77da954d861a1a47524f09.png

源码示例：


<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:background_element="$graphic:color_background_gray_element">
    <Text
        ohos:id="$+id:text1"
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:text_size="25fp"
        ohos:top_margin="15vp"
        ohos:left_margin="15vp"
        ohos:right_margin="15vp"
        ohos:background_element="$graphic:color_gray_element"
        ohos:text="Title"
        ohos:text_weight="1000"
        ohos:text_alignment="horizontal_center"
    />
    <Text
        ohos:id="$+id:text2"
        ohos:width="match_content"
        ohos:height="120vp"
        ohos:text_size="10fp"
        ohos:background_element="$graphic:color_gray_element"
        ohos:text="Catalog"
        ohos:top_margin="15vp"
        ohos:left_margin="15vp"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:align_parent_left="true"
        ohos:text_alignment="center"
        ohos:multiple_lines="true"
        ohos:below="$id:text1"
        ohos:text_font="serif"/>
    <Text
        ohos:id="$+id:text3"
        ohos:width="match_parent"
        ohos:height="120vp"
        ohos:text_size="25fp"
        ohos:background_element="$graphic:color_gray_element"
        ohos:text="Content"
        ohos:top_margin="15vp"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:text_alignment="center"
        ohos:below="$id:text1"
        ohos:end_of="$id:text2"
        ohos:text_font="serif"/>
    <Button
        ohos:id="$+id:button1"
        ohos:width="70vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="$graphic:color_gray_element"
        ohos:text="Previous"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:below="$id:text3"
        ohos:left_of="$id:button2"
        ohos:italic="false"
        ohos:text_weight="5"
        ohos:text_font="serif"/>
    <Button
        ohos:id="$+id:button2"
        ohos:width="70vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="$graphic:color_gray_element"
        ohos:text="Next"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:align_parent_end="true"
        ohos:below="$id:text3"
        ohos:italic="false"
        ohos:text_weight="5"
        ohos:text_font="serif"/>
</DependentLayout>


color_background_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#ffbbbbbb"/>
</shape>

color_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#878787"/>
</shape>
文章标签：
Java
数据格式
开发者
XML
关键词：
Java开发
Java学习
Java框架
HarmonyOS开发
HarmonyOS框架
爱吃土豆丝的打工人
目录
相关文章
一枚后端工程狮
|
3月前
|
安全 前端开发 Java
《深入理解Spring》：现代Java开发的核心框架
Spring自2003年诞生以来，已成为Java企业级开发的基石，凭借IoC、AOP、声明式编程等核心特性，极大简化了开发复杂度。本系列将深入解析Spring框架核心原理及Spring Boot、Cloud、Security等生态组件，助力开发者构建高效、可扩展的应用体系。（238字）
一枚后端工程狮
558 55
一枚后端工程狮
|
3月前
|
存储 安全 Java
《数据之美》：Java集合框架全景解析
Java集合框架是数据管理的核心工具，涵盖List、Set、Map等体系，提供丰富接口与实现类，支持高效的数据操作与算法处理。
一枚后端工程狮
202 0
蓝易云
|
3月前
|
消息中间件 缓存 Java
Spring框架优化：提高Java应用的性能与适应性
以上方法均旨在综合考虑Java Spring 应该程序设计原则, 数据库交互, 编码实践和系统架构布局等多角度因素, 旨在达到高效稳定运转目标同时也易于未来扩展.
蓝易云
161 8
蓝易云
|
3月前
|
存储 算法 安全
Java集合框架：理解类型多样性与限制
总之，在 Java 题材中正确地应对多样化与约束条件要求开发人员深入理解面向对象原则、范式编程思想以及JVM工作机理等核心知识点。通过精心设计与周密规划能够有效地利用 Java 高级特征打造出既健壮又灵活易维护系统软件产品。
蓝易云
120 7
varin
|
4月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念，并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容，同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
varin
403 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
游客4v3gpgavlizks
|
4月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全：免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据，深入解析抖音/微信爆款小游戏的开发逻辑，重点讲解PHP+Java双引擎架构实战，涵盖技术选型、架构设计、性能优化与开源生态，提供完整开源工具链，助力开发者从理论到落地打造高留存、高并发的小游戏产品。
游客4v3gpgavlizks
763 1
全栈若城
|
7月前
|
设计模式 缓存 容器
06.HarmonyOS Next UI进阶：Text组件与视觉样式完全指南
在HarmonyOS Next应用开发中，Text组件是最基础也是最常用的UI元素之一。它不仅用于显示文本内容，还可以通过丰富的样式属性实现各种视觉效果。掌握Text组件的样式设置，是构建精美UI界面的基础技能。
全栈若城
385 1
韩曙亮
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
韩曙亮
558 0
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
爱吃土豆丝的打工人
|
XML Java 数据格式
HarmonyOS学习路之开发篇—Java UI框架(自定义组件与布局 二)
自定义布局 当Java UI框架提供的布局无法满足需求时，可以创建自定义布局，根据需求自定义布局规则
爱吃土豆丝的打工人
248 0
爱吃土豆丝的打工人
|
XML 前端开发 Java
HarmonyOS学习路之开发篇—Java UI框架(自定义组件与布局 一)
HarmonyOS提供了一套复杂且强大的Java UI框架，其中Component提供内容显示，是界面中所有组件的基类。ComponentContainer作为容器容纳Component或ComponentContainer对象，并对它们进行布局。
爱吃土豆丝的打工人
361 0

热门文章

最新文章

  • 1
    超大坑！springboot + vue + element-ui，运行前端项目报these dependencies were not found的问题
  • 2
    实战项目：通讯录&amp;nbsp;UI—第十一天
  • 3
    ui结构查看和调试方法
  • 4
    带过滤的复制项UI操作导致订阅全部初始化问题
  • 5
    ios可视化编程 UI高级 UI_13
  • 6
    Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（登录注册页面，验证码）
  • 7
    跨线程操作UI
  • 8
    人脸表情识别系统介绍——上篇（python实现，含UI界面及完整代码）
  • 9
    分享35个讨人喜欢的漂亮进度条UI设计
  • 10
    温故而知新:WinForm/Silverlight多线程编程中如何更新UI控件的值
  • 1
    从“天书”到源码：HarmonyOS NEXT 崩溃堆栈解析实战指南
    500
  • 2
    【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    345
  • 3
    【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    200
  • 4
    【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    347
  • 5
    【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    782
  • 6
    HarmonyOS NEXT 5.0 的星闪（NearLink）开发应用案例
    652
  • 7
    鸿蒙应用开发从入门到实战（十六）：线性布局案例
    192
  • 8
    使用Tabs选项卡组件快速搭建鸿蒙APP框架
    438
  • 9
    鸿蒙应用开发从入门到实战（十四）：ArkUI组件Column&Row&线性布局
    370
  • 10
    鸿蒙应用开发从入门到实战（十三）：ArkUI组件Slider&Progress
    303

    • 相关课程

    更多
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计
  • Java编程入门
  • Java面向对象编程
  • Java高级编程

    • 相关电子书

    更多
  • Spring Cloud Alibaba - 重新定义 Java Cloud-Native
  • The Reactive Cloud Native Arch
  • JAVA开发手册1.5.0
    • 下一篇
    【DataEase】零代码数据可视化分析工具的安装部署保姆级教程