2017-04-25 38 views
1

我有一些Text元素与textFormat: Text.RichText。当图像加载,所述Text膨胀,但布局不会重新计算,因此元素重叠:如何触发ColumnLayout重新布局?

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

当图像最后下载到应用程序,我看到:

enter image description here

因此,图像加载后Text的重叠是因为高度正确,但它不会流向父级ColumnLayout

如何触发顶部父母ColumnLayout重新绘制?

回答

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