如何触发 ColumnLayout 重新布局？答案

【问题标题】：How can I trigger a ColumnLayout re-layout?如何触发 ColumnLayout 重新布局？
【发布时间】：2017-04-25 10:17:05
【问题描述】：

我有一些带有textFormat: Text.RichText 的Text 元素。当图像加载时，Text 会扩展，但布局不会重新计算，因此元素会重叠：

import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3

Item {
  ColumnLayout {
    Repeater {
      model: [1,2];
      delegate: Item {
        id: item;
        height: sample_col.height;
        ColumnLayout {
          id:sample_col
          Text { text: 'sample_col.height=' + sample_col.height + 
                       ' item.height=' + item.height; }
          Text {
            id: expanded_sample_html;
            textFormat: Text.RichText;
            text: '<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg">';
          }  
        }
      }
    }
  }
}

当图像最终下载到应用程序时，我看到了：

因此，由于高度正确，加载图像后Text 的重叠，但它不会流向父ColumnLayout。

如何触发顶、父ColumnLayout重绘？

【问题讨论】：

标签： qt qml qt5 qtquick2

【解决方案1】：

在使用布局类型时应该使用附加的Layout 属性。

必须显式创建声明性功能是缺少某些东西或代码应该重构的好兆头。

Flickable {
    anchors.fill: parent
    contentWidth: mainColumn.width
    contentHeight: mainColumn.height
    ColumnLayout {
        id: mainColumn
        Repeater {
            model: [1,2];
            delegate: Item {
                id: item;
                Layout.preferredWidth: sample_col.width
                Layout.preferredHeight: sample_col.height
                ColumnLayout {
                    id:sample_col
                    Text { text: 'sample_col.height=' + sample_col.height +
                                 ' item.height=' + item.height; }
                    Text {
                        id: expanded_sample_html;
                        textFormat: Text.RichText;
                        text: '<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg">';
                    }
                }
            }
        }
    }
}

【讨论】：