[英]Dynamic height of tableviewcolumn according to text length
hello I have the following problem I am working with qt quick control 1.4 because the tableview of 2.15 does not adapt correctly as I would like;你好我有以下问题我正在使用 qt quick control 1.4 因为 2.15 的 tableview 没有按照我的意愿正确适应; the table overflows in height and my question is the following can you make a dynamic height and that can be adding say 15 to the default height
表格的高度溢出了,我的问题是下面你能不能做一个动态高度,并且可以在默认高度上增加 15
example: the default height is 50示例:默认高度为 50
can you add 15 or 10 depending on the length of the text?您可以根据文本的长度添加 15 或 10 吗?
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Window 2.2
ApplicationWindow {
title: qsTr("TableView example")
id: root
width: 500
height: 400
visible: true
//[!addrowdata]
/////////////////////////////
ListModel {
id: tablemode
ListElement {
number: "1"
elevation_Max:"90000"
elevation_Min:"50"
length:"52-73\n122-163\n200-264\n280-317"
depth:"8636-8900"
}
ListElement {
number: "2"
elevation_Max:"8000"
elevation_Min:"21"
length:"0-57\n119-166\n206-264"
depth:"12700-13462"
}
}
TableView{
id :tableView
anchors.fill: parent
alternatingRowColors : false
TableViewColumn {
role: "number"
title: "Number"
width: tableView.viewport.width/tableView.columnCount
horizontalAlignment: Text.AlignHCenter
}
TableViewColumn {
role: "elevation_Max"
title: "Elevation Max"
width: tableView.viewport.width/tableView.columnCount
horizontalAlignment: Text.AlignHCenter
}
TableViewColumn {
role: "elevation_Min"
title: "Elevation Min"
width: tableView.viewport.width/tableView.columnCount
horizontalAlignment: Text.AlignHCenter
}
TableViewColumn {
role: "length"
title: "Length"
width: tableView.viewport.width/tableView.columnCount
horizontalAlignment: Text.AlignHCenter
}
TableViewColumn {
role: "depth"
title: "Depth"
width: tableView.viewport.width/tableView.columnCount
horizontalAlignment: Text.AlignHCenter
}
model: tablemode
//Custom header proxy
headerDelegate:Rectangle{
color: "#0A1B2D"
width: 100;
height: 40
border.color: "white"
Text{
anchors.centerIn : parent
text: styleData.value
color: "#ffffff"
font.pixelSize: 15
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
//The line agent can modify the line height information
rowDelegate: Rectangle {
height: 50 // problem text protrudes out of the row
color: "#052641"
anchors.leftMargin: 2
}
itemDelegate: Rectangle{
id: rectangle
border.color: "white"
border.width: 1
color : styleData.selected ? "#white": "#394755" //Extern
Text {
anchors.centerIn : parent
anchors.leftMargin: 5
color : "#ffffff"
width: parent.width
height: parent.height
text: styleData.value
font.pixelSize: 14
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
wrapMode: Text.WordWrap
}
}
style: TableViewStyle{
textColor: "white"
highlightedTextColor: "#00CCFE" //Selected color
backgroundColor : "#f5f5f5"
frame: Rectangle {
border{
color: "#00000000" // color of the border
}
}
handle: Rectangle {
implicitWidth: 10
implicitHeight: 10
radius:20
color: "#052641"//indicador en movimiento
border.color:"#00000000"
}
scrollBarBackground: Rectangle {
implicitWidth: 10
implicitHeight: 10
color: "#00000000"
border.color:"#00000000"
}
decrementControl: Rectangle {
implicitWidth: 10
implicitHeight: 10
color: "#00000000"
border.color:"#00000000"
}
incrementControl: Rectangle {
implicitWidth: 10
implicitHeight: 10
color: "#00000000"
border.color:"#00000000"
}
}
}
}
I have looked for different solutions and none of them fits the text, if you could help me I have been struggling with this for days I would appreciate it in advance.我一直在寻找不同的解决方案,但没有一个适合文本,如果你能帮助我,我已经为此苦苦挣扎了好几天,我会提前表示感谢。
I've added a property maxSize
and modified it every time the contentHeight
of one cell changes to something bigger than maxSize
.我添加了一个属性
maxSize
并在每次一个单元格的contentHeight
更改为大于maxSize
时修改它。
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Window 2.2
ApplicationWindow {
title: qsTr("TableView example")
id: root
width: 500
height: 400
visible: true
property int maxHeight: 50
//[!addrowdata]
/////////////////////////////
ListModel {
id: tablemode
ListElement {
number: "1"
elevation_Max:"90000"
elevation_Min:"50"
length:"52-73\n122-163\n200-264\n280-317"
depth:"8636-8900"
}
ListElement {
number: "2"
elevation_Max:"8000"
elevation_Min:"21"
length:"0-57\n119-166\n206-264"
depth:"12700-13462"
}
}
TableView{
id :tableView
anchors.fill: parent
alternatingRowColors : false
TableViewColumn {
role: "number"
title: "Number"
width: tableView.viewport.width/tableView.columnCount
horizontalAlignment: Text.AlignHCenter
}
TableViewColumn {
role: "elevation_Max"
title: "Elevation Max"
width: tableView.viewport.width/tableView.columnCount
horizontalAlignment: Text.AlignHCenter
}
TableViewColumn {
role: "elevation_Min"
title: "Elevation Min"
width: tableView.viewport.width/tableView.columnCount
horizontalAlignment: Text.AlignHCenter
}
TableViewColumn {
role: "length"
title: "Length"
width: tableView.viewport.width/tableView.columnCount
horizontalAlignment: Text.AlignHCenter
}
TableViewColumn {
role: "depth"
title: "Depth"
width: tableView.viewport.width/tableView.columnCount
horizontalAlignment: Text.AlignHCenter
}
model: tablemode
//Custom header proxy
headerDelegate:Rectangle{
color: "#0A1B2D"
width: 100;
height: 40
border.color: "white"
Text{
anchors.centerIn : parent
text: styleData.value
color: "#ffffff"
font.pixelSize: 15
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
//The line agent can modify the line height information
rowDelegate: Rectangle {
height: maxHeight // problem text protrudes out of the row
color: "#052641"
anchors.leftMargin: 2
}
itemDelegate: Rectangle{
id: rectangle
border.color: "white"
border.width: 1
color : styleData.selected ? "#white": "#394755" //Extern
Text {
anchors.centerIn : parent
anchors.leftMargin: 5
color : "#ffffff"
width: parent.width
height: parent.height
text: styleData.value
font.pixelSize: 14
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
wrapMode: Text.WordWrap
onContentHeightChanged: {
if (contentHeight > maxHeight) maxHeight = contentHeight;
}
}
}
style: TableViewStyle{
textColor: "white"
highlightedTextColor: "#00CCFE" //Selected color
backgroundColor : "#f5f5f5"
frame: Rectangle {
border{
color: "#00000000" // color of the border
}
}
handle: Rectangle {
implicitWidth: 10
implicitHeight: 10
radius:20
color: "#052641"//indicador en movimiento
border.color:"#00000000"
}
scrollBarBackground: Rectangle {
implicitWidth: 10
implicitHeight: 10
color: "#00000000"
border.color:"#00000000"
}
decrementControl: Rectangle {
implicitWidth: 10
implicitHeight: 10
color: "#00000000"
border.color:"#00000000"
}
incrementControl: Rectangle {
implicitWidth: 10
implicitHeight: 10
color: "#00000000"
border.color:"#00000000"
}
}
}
}
The result of this hacky solution would look like this:这个 hacky 解决方案的结果如下所示:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.