Question

在以下listview的项目中，文本的长度可以不同（10或1000个字符），因此我希望使每个列表视图项高度适合文本高度。（比如css height：auto）。

 Component {
        id: sysNotificationsDelegate        
        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            height: childrenRect.height                        
            color: "#eee"        
            Text {        
                text: model.body // <-- TEXT SIZE CAN BE DIFFERENT     
                wrapMode: Text.WordWrap
            }
        }
    }


ListView {
       anchors.fill: parent            
       spacing: 10

       model: ListModel {
           id: listModel
       }
       delegate: sysNotificationsDelegate    
}

实现这一目标的最佳和最佳方式是什么？（考虑到我将有很多这样的元素，并且我已经读过qml中的属性绑定有一些额外的性能成本）

（Qt 5.10）

Answer 1

要使Text能够包裹（或删除），它需要设置宽度，否则它将无限制地扩展。

Text有3个重要的宽度属性：

width：将其视为文本行的最大宽度，除非您不想限制屏幕宽度（可以水平滚动或平移），否则应始终设置它。设置wrapMode或elide而不设置width将无效。
implicitWidth：文本需要占据的宽度以适合单行。包括左右padding。不依赖于显式width。不确定何时使用它¯\ _（ツ）_ /¯评论中的任何想法？
contentWidth：文本实际占用的宽度，考虑到包装和删除。不包括左右padding。取决于明确的width。使用此选项查询文本的宽度，例如当您想在某些文本周围绘制一个框时（例如聊天气泡）。

高度也存在相同的相应属性。除了明确的maximumLineCount

之外，height还可以限制文字的高度

这意味着在你的情况下你想做：

Rectangle {
    anchors.left: parent.left
    anchors.right: parent.right
    height: text.contentHeight // contentHeight, height and implicitHeight are all the same here since there's no padding, no maximumLineCount and height isn't explicitely set                        
    color: "#eee"        
    Text {
        id: text
        text: model.body // <-- TEXT SIZE CAN BE DIFFERENT
        width: parent.width // remember, width = max width for Text
        wrapMode: Text.WordWrap
    }
}

Qml：如何根据内部内容使listview项高度动态化？

1 个答案: