乐趣区

关于android:list组件设置flexdirectionrow之后设置的高度不生效

景象形容:
list 组件设置 flex-direction: row 之后,设置的高度 height: 100px 不失效,整个 list 高度会变的异样大。

问题代码如下:

<template>
    <!-- Only one root node is allowed in template. -->
    <div class="container">
            <list style="background-color: red;flex-direction:row;height: 100px;">
                <list-item type="list-item" for="listdata" style="background-color: green;">
                    <image src="{{$item}}"></image>
                </list-item>
            </list>
    </div>
</template>
<style>
    .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .title {
        font-size: 50px;
        background-color: blue;
    }
</style>
 
<script>
    module.exports = {
        data: {componentData: {},
            listdata: ['/Common/logo.png', '/Common/logo.png', '/Common/logo.png']
        },
        onInit() {},
    }
</script>

问题截图如下所示:


问题剖析:
快利用中,当根节点 div 间接嵌套 list 组件时,根节点 div 设置 flex-direction: column 和 list 设置 flex-direction: row 时,list 组件计大小会被屡次执行,最终传进来的值与代码中设置的值不统一。

解决方案:
可采纳以下写法,list 上再包一层 div,即可实现想要的成果,批改代码(红色局部)如下:

<template>
    <!-- Only one root node is allowed in template. -->
    <div class="container">
        <div>
            <list style="background-color: red;flex-direction:row;height: 100px;">
                <list-item type="list-item" for="listdata" style="background-color: green;">
                    <image src="{{$item}}"></image>
                </list-item>
            </list>
        </div>
    </div>
</template>
<style>
    .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .title {
        font-size: 50px;
        background-color: blue;
    }
</style>
 
<script>
    module.exports = {
        data: {componentData: {},
            listdata: ['/Common/logo.png', '/Common/logo.png', '/Common/logo.png']
        },
        onInit() {},
    }
</script>

批改后效果图如下所示:


欲了解更多详情,请参见:

快利用 list 组件介绍:https://developer.huawei.com/…

原文链接:https://developer.huawei.com/…
原作者:Mayism

退出移动版