我有一个 TableView，其中有一个用于表格的垂直 Slider{} 组件和水平 Slider{} 组件。我不使用表格的horizontalScrollBar和verticalScrollBar。 该表格有 8 列，但当我打开表格时仅显示其中 6 列，并且使用水平 Slider{} 组件我想滚动以查看其他 2 列。 我使垂直 Slider{} 的实现能够正常工作，然后尝试对水平 Slider{} 执行相反的操作，代码如下：
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls 2.15
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.3
import paymentsystem 1.0
Item {
id: item
property string imagineTabel: ""
property bool margin: control.from > 0
property bool sliderValueChanged: false
property bool sliderValueChangedH: false
property var model: null
property var columns: []
property int columnCount: {
if(columns.length > 6) {
horizontalScrollBar = Qt.ScrollBarAlwaysOff;
sliderH = true;
return 6;
}
else
{ return columns.length; }
}
property var horizontalScrollBar: Qt.ScrollBarAlwaysOff
property var verticalScrollBar: Qt.ScrollBarAlwaysOff
property bool sliderH: false
//-------------------------------------------------------------------------------------------------
//slider orizontal
Slider {
id: controlH
anchors.top: tableImg.bottom
anchors.topMargin: scrMgr.size.height * 0.0072 //7
from: tableView.maxLeftColumn
to: 0
visible: item.sliderH
value: tableView.leftColumn
onValueChanged: {
if(sliderValueChangedH) {
sliderValueChangedH = false;
return;
}
var tmpValH = Math.round(controlH.value);
tmpValH = Math.max(0, tmpValH);
tmpValH = Math.min(tableView.maxLeftColumn, tmpValH);
sliderValueChangedH = true;
tableView.leftColumn = tmpValH;
}
background: Rectangle {
x: controlH.leftPadding
y: controlH.topPadding + controlH.availableHeight / 2 - height / 2
implicitWidth: tableImg.width
implicitHeight: scrMgr.size.height * 0.06 //32
width: controlH.availableWidth
height: implicitHeight
color: "#00000000"
CustomImage {
source: resMgr.getResource("qrc:/Images/Slider/SliderbarH.svg")
anchors.fill: parent
utilBox {t_left: 3.3; t_right: 3.4; t_top: 0; t_bottom: 0;}
}
}
handle: Rectangle {
x: controlH.leftPadding + controlH.visualPosition * (controlH.availableWidth - width)
y: controlH.topPadding + controlH.availableHeight / 2 - height / 2
implicitWidth: scrMgr.size.width * 0.0364 //35
implicitHeight: scrMgr.size.height * 0.0648 //35
color: "#00000000"
CustomImage {
source: resMgr.getResource("qrc:/Images/Slider/Sliderdot.svg")
anchors.fill: parent
utilBox {t_left: 19; t_right: 20; t_top: 17; t_bottom: 23;}
}
}
}
//-------------------------------------------------------------------------------------------------
//slider vertical
Slider {
id: control
anchors.verticalCenter: tableImg.verticalCenter
anchors.left: tableImg.right
anchors.leftMargin: scrMgr.size.width * 0.0072 //7
from: tableView.maxTopRow
to: 0
orientation: Qt.Vertical
visible: item.margin //control.from > 0
onValueChanged: {
if(sliderValueChanged) {
sliderValueChanged = false;
return;
}
var tmpVal = Math.round(control.value);
tmpVal = Math.max(0, tmpVal);
tmpVal = Math.min(tableView.maxTopRow, tmpVal);
sliderValueChanged = true;
tableView.positionViewAtRow(tmpVal, ListView.Beginning);
}
background: Rectangle {
x: control.leftPadding + control.availableWidth / 2 - width / 2
y: control.topPadding
implicitWidth: scrMgr.size.width * 0.0364 //35
implicitHeight: tableImg.height
width: implicitWidth
height: control.availableHeight
color: "#00000000"
CustomImage {
source: resMgr.getResource("qrc:/Images/Slider/Sliderbar.svg")
anchors.fill: parent
utilBox {t_left: 0; t_right: 0; t_top: 1.9; t_bottom: 4.3;}
}
}
handle: Rectangle {
x: control.leftPadding + control.availableWidth / 2 - width / 2
y: control.topPadding + control.visualPosition * (control.availableHeight - height);
implicitWidth: scrMgr.size.width * 0.0364 //35
implicitHeight: scrMgr.size.height * 0.0648 //35
color: "#00000000"
CustomImage {
source: resMgr.getResource("qrc:/Images/Slider/Sliderdot.svg")
anchors.fill: parent
utilBox {t_left: 19; t_right: 20; t_top: 17; t_bottom: 23;}
}
}
}
//-------------------------------------------------------------------------------------------------
//imagine tabel
CustomImage {
id: tableImg
source: item.imagineTabel
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
}
//-------------------------------------------------------------------------------------------------
Connections {
target: tableView.flickableItem
function onMovementEnded() {
tableView.positionViewAtRow(tableView.topRow, ListView.Beginning);
}
}
//-------------------------------------------------------------------------------------------------
//tabel
TableView {
id: tableView
anchors.fill: tableImg
backgroundVisible: false
clip: true
verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff;
horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff;
property int rowHeight: 40 * scrMgr.size.height / 1080
property int startYContent: 0
property int topYcontent: tableView.flickableItem.contentY
property int topRow: topYcontent + tableView.rowAt(5,tableView.startYContent + 5) - topYcontent //keep add and substract in order to have active bindings
property int maxVisibleRows: -1
property int maxTopRow: Math.max(0, tableView.rowCount - maxVisibleRows)
property int rowWidth: 400 * scrMgr.size.width / 1920
property int startXContent: 0
property int topXContent: tableView.flickableItem.contentX
property int leftColumn: Math.floor(topXContent / tableView.rowWidth)
property int maxVisibleColumns: -1
property int maxLeftColumn: Math.max(0, tableView.columnCount - maxVisibleColumns)
onLeftColumnChanged: {
if(sliderValueChangedH) {
sliderValueChangedH = false;
return;
}
sliderValueChangedH = true;
controlH.value = leftColumn;
}
onTopRowChanged: {
if(sliderValueChanged) {
sliderValueChanged = false;
return;
}
sliderValueChanged = true;
control.value = topRow;
}
resources:
{
var length = columns.length
var temp = []
for(var i = 0; i < length; i++)
{
temp.push(columnComponent.createObject(tableView, {"role": columns[i].role, "title": columns[i].title}));
}
return temp
}
model: item.model
style: TableViewStyle {
frame: Rectangle {
color: "#00000000"
border.color: "#00000000"
}
alternateBackgroundColor: "#00000000"
itemDelegate: Item {
x: scrMgr.size.width * 0.00556 //3
y: -scrMgr.size.height * 0.00926 //-5
height: tableView.rowHeight //19
width: tableView.rowWidth
Text {
id: textTable
anchors.verticalCenter: parent.verticalCenter
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: styleData.role === "Descriere" ? Text.AlignLeft : Text.AlignHCenter
color: styleData.textColor
elide: styleData.elideMode
text: styleData.value
font.pixelSize: scrMgr.size.height * 0.028
visible: tableView.topRow >= 0 ? (styleData.row >= tableView.topRow) : true
}
}
rowDelegate: Rectangle{
width: tableView.rowWidth
height: tableView.rowHeight
color: "#00000000";
}
headerDelegate: Rectangle {
id: headerComp
height: textItem.implicitHeight * 1.2 + scrMgr.size.height * 0.0277 //15
width: textItem.implicitWidth
color: "#00000000";
Text {
id: textItem
anchors.fill: parent
font.pixelSize: scrMgr.size.height * 0.028
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
anchors.leftMargin: scrMgr.size.width * 0.0084 //8
anchors.topMargin: scrMgr.size.height * 0.015 //8
text: styleData.value
color: "white"
}
Component.onCompleted: {
tableView.startYContent = headerComp.y + headerComp.height;
tableView.maxVisibleRows = (((tableView.height - headerComp.y) / tableView.rowHeight) - 1) - (horizontalScrollBar == Qt.ScrollBarAlwaysOn ? 1 : 0);
tableView.startXContent = headerComp.x + headerComp.width;
tableView.maxVisibleColumns = (((tableView.width - headerComp.x) / tableView.rowWidth) - 1) - (verticalScrollBar == Qt.ScrollBarAlwaysOn ? 0 : 1);
}
}
}
}
Component {
id: columnComponent
TableViewColumn{ width: tableView.width / item.columnCount; movable: false; }
}
}
有什么解决办法吗？
https://imgur.com/a/dpORSa8为什么不使用内置的ScrollBar？例如
TableView {
ScrollBar.horizontal: ScrollBar {
policy: ScrollBar.AlwaysOn
height: 20
}
}