如何觸發ColumnLayout重新佈局？

Question

我有一些Text元素與textFormat: Text.RichText。當圖像加載，所述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重新繪製？

Answer 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">'; 
        } 
       } 
      } 
     } 
    } 
}