list組件設置flex-direction：row以後，設置的高度不生效

現象描述：
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