[英]Dynamic height of tableviewcolumn according to text length
你好我有以下問題我正在使用 qt quick control 1.4 因為 2.15 的 tableview 沒有按照我的意願正確適應; 表格的高度溢出了,我的問題是下面你能不能做一個動態高度,並且可以在默認高度上增加 15
示例:默認高度為 50
您可以根據文本的長度添加 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"
}
}
}
}
我一直在尋找不同的解決方案,但沒有一個適合文本,如果你能幫助我,我已經為此苦苦掙扎了好幾天,我會提前表示感謝。
我添加了一個屬性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"
}
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.