关于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