HarmonyOS UI开发 match_parent与match_content

╰半橙微兮° 2022-10-08 02:25 327阅读 0赞

### match\_parent： ###

表示组件大小将扩展为父组件允许的最大值，它将占据父组件方向上的剩余大小

### match\_content： ###

表示组件大小与它的内容占据的大小范围相适应。

### 两者详细说明: ###

下面看下定向布局代码

<?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:orientation="vertical">
    
        <Button
            ohos:id="$+id:button1"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:top_margin="10vp"
            ohos:background_element="#00d8a0"
            ohos:text_size="20fp"
            ohos:text="Java"/>
    
    
    </DirectionalLayout>

match\_parent

布局里面button 的宽度使用了match\_parent 他的父类就是DirectionalLayout,而DirectionalLayout的的宽度也是设置了match\_parent,它的最外层没有父类所以应该是整个屏幕的, 回头看看button 宽度应该占据了整个屏幕,

match\_content 的大小是自己的宽度适应,就是button本身,

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70][]

为了更好地理解在看一个例子

<?xml version="1.0" encoding="utf-8"?>
    <DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:background_element="#444fff"
        ohos:orientation="vertical">
    
        <Button
            ohos:id="$+id:button1"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:top_margin="10vp"
            ohos:background_element="#00d8a0"
            ohos:text_size="20fp"
            ohos:text="Java"/>
    
    
    
    </DirectionalLayout>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70]: /images/20221005/fd2a504e6a8d44d28d21df908dbaa509.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 1]: /images/20221005/f5a7dcbf5e4446dcb8c881af332ee9d9.png