我希望我的桌子从右到左 这是我的表:
跑步之后,我希望它像这样:
代码是golang中的QML。 我没有找到任何答案。 我问过几个网站,但没有答案。
我的代码:
import QtQuick 2.0
import QtQuick.Controls 1.0
Rectangle {
id:kol
width: 360
height: 360
Rectangle {
id:mos
width: 360
height: 360
anchors.centerIn: parent
ListModel {
id: dataModel
ListElement {
color: "آبی"
text: "اول"
}
ListElement {
color: "قرمز"
text: "دوم"
}
ListElement {
color: "سبز"
text: "سوم"
}
ListElement {
color: "زرد"
text: "چهارم"
}
}
TableView {
id: view
model: dataModel
anchors.fill: parent
TableViewColumn {
width: 100
title: "رنگ"
role: "color"
}
TableViewColumn {
width: 100
title: "متن"
role: "text"
}
itemDelegate: Item {
Text {
anchors.right: parent.right
// renderType: Text.NativeRendering
text: styleData.value
}
}
}
}
}
答案 0 :(得分:0)
Qt文档说:
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls.Universal 2.12
Item {
id:root
implicitWidth: 500
clip: true
implicitHeight: 300
property alias model :listView.model
property alias currentIndex: listView.currentIndex
property var headerModel : []
ListView {
id: listView
anchors.fill: parent
onCurrentIndexChanged: {
root.currentIndexChanged()
}
//contentWidth: headerItem.width
flickableDirection: Flickable.HorizontalAndVerticalFlick
header: Row{
spacing: 0
anchors.right: parent.right
anchors.rightMargin: 0
layoutDirection: Qt.RightToLeft
function itemAt(index) {
return repeater.itemAt(index)
}
Repeater{
id:repeater
model: headerModel
Row{
layoutDirection: Qt.RightToLeft
width: modelData.width * listView.width
Label {
height: 40
clip: true
id:textArea
verticalAlignment: Text.AlignVCenter
text: modelData.name
width: parent.width -1
font.family: "B Nazanin"
font.bold: true
font.pointSize: 12
padding: 10
background: Rectangle { color: "white" }
UIcon{
text: "\uf0dc"
color: Universal.color(Universal.Cobalt)
anchors.left: parent.left
anchors.leftMargin: 0
anchors.verticalCenter: parent.verticalCenter
}
MouseArea{
clip: true
anchors.fill: parent
onClicked: {
//console.log(modelData.name)
//TODO:sort and show sorting arrow
}
}
}
Rectangle{
height: parent.height
width: 1
color: "silver"
}
}
}
}
delegate: Column {
width: parent.width
id: delegate
anchors.right: parent.right
anchors.rightMargin: 0
Rectangle{
width: parent.width
implicitHeight: 35
id:baserect
z:1
color: "white"
clip: true
Row {
anchors.fill: parent
spacing: 0
layoutDirection: Qt.RightToLeft
clip: true
Repeater {
anchors.fill: parent
model: modelData
clip: true
Row{
id:_row
layoutDirection: Qt.RightToLeft
width: childrenRect.width
Text{
clip: true
id:iDelegate
text:modelData
font.family: "B Nazanin"
font.pointSize: 11
verticalAlignment: Text.AlignVCenter
padding: 5
Binding{
target: iDelegate
property: 'width'
value: listView.headerItem.children[index].width -1
}
}
Rectangle{
height: baserect.height
width: 1
color: "silver"
}
}
}
}
Rectangle {
id:line
clip: true
color: "#808080"
width: parent.width
height: 1
}
MouseArea{
anchors.fill: parent
hoverEnabled: true
onEntered: {
//baserect.color = "gray"
}
onExited: {
//baserect.color = 'white'
}
onClicked: {
listView.currentIndex = index
}
}
}
}
focus: true
highlight: Rectangle {
z:1
color: "#77B5D3E7";
radius: 0 }
ScrollIndicator.horizontal: ScrollIndicator { }
ScrollIndicator.vertical: ScrollIndicator { }
}
}
更新:您可以使用QmlGrid代替TableView。
更新2019-04-23:在这里,我创建了从右到左的简单表格视图:
UTable{
width:500
height:300
onCurrentIndexChanged: {
console.log(currentIndex)
}
model: [["تست","تست2","تست3","تست4"],["خط 1","خط2","خط3","خط4"],["خط 1","خط2","خط3","خط4"]]
headerModel : [
{
"name":"ستون 0.3",
"width":0.3
},{
"name":"ستون 0.2",
"width":0.2
},{
"name":"ستون 0.25",
"width":0.25
},{
"name":"ستون اخر",
"width":0.25
}
]
}
以及使用示例:
import QtQuick 2.0
Item{
implicitWidth: 35
implicitHeight: 35
property alias size : icotext.font.pointSize
property alias text : icotext.text
property alias font : icotext.font.family
property alias color : icotext.color
Text {
id:icotext
anchors.centerIn: parent
font.family: "fontawesome"
text: "\uf110"
font.pointSize: 12
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
这是我们的UIcon:
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls.Universal 2.12
Item {
id:root
implicitWidth: 500
clip: true
implicitHeight: 300
property alias model :listView.model
property alias currentIndex: listView.currentIndex
property bool byColName:false
property var headerModel : []
ListView {
id: listView
anchors.fill: parent
onCurrentIndexChanged: {
root.currentIndexChanged()
}
onModelChanged: {
console.log(model)
}
//contentWidth: headerItem.width
flickableDirection: Flickable.HorizontalAndVerticalFlick
header: Row{
spacing: 0
anchors.right: parent.right
anchors.rightMargin: 0
layoutDirection: Qt.RightToLeft
function itemAt(index) {
return repeater.itemAt(index)
}
Repeater{
id:repeater
model: headerModel
Row{
layoutDirection: Qt.RightToLeft
width: modelData.width * listView.width
Label {
height: 40
clip: true
id:textArea
verticalAlignment: Text.AlignVCenter
text: root.byColName?modelData.title:modelData.name
width: parent.width -1
horizontalAlignment: Text.AlignRight
font.family: "B Nazanin"
font.bold: true
font.pointSize: 12
padding: 10
background: Rectangle { color: "white" }
UIcon{
text: "\uf0dc"
color: Universal.color(Universal.Cobalt)
anchors.left: parent.left
anchors.leftMargin: 0
anchors.verticalCenter: parent.verticalCenter
}
MouseArea{
clip: true
anchors.fill: parent
onClicked: {
//console.log(modelData.name)
//TODO:sort and show sorting arrow
}
}
}
Rectangle{
height: parent.height
width: 1
color: "silver"
}
}
}
}
delegate: Column {
width: parent.width
id: delegate
anchors.right: parent.right
anchors.rightMargin: 0
Rectangle{
width: parent.width
implicitHeight: 35
id:baserect
z:1
color: "white"
clip: true
Row {
anchors.fill: parent
spacing: 0
layoutDirection: Qt.RightToLeft
clip: true
Repeater {
id:_repeater
anchors.fill: parent
property var actualModel : modelData
model: getJsonCount(modelData)
onModelChanged: {
console.log(model)
}
function getJsonCount(obj){
var count = 0
for(var key in obj){
++count;
}
return count;
}
clip: true
Row{
id:_row
layoutDirection: Qt.RightToLeft
width: childrenRect.width
Text{
clip: true
id:iDelegate
text:{
if(root.byColName){
var columnName = headerModel[index].name
var data = _repeater.actualModel[columnName]
return data;
}
else{
return _repeater.actualModel[index];
}
}
horizontalAlignment: Text.AlignRight
font.family: "B Nazanin"
font.pointSize: 11
verticalAlignment: Text.AlignVCenter
padding: 5
Binding{
target: iDelegate
property: 'width'
value: listView.headerItem.children[index].width -1
}
}
Rectangle{
height: baserect.height
width: 1
color: "silver"
}
}
}
}
Rectangle {
id:line
clip: true
color: "#808080"
width: parent.width
height: 1
}
MouseArea{
anchors.fill: parent
hoverEnabled: true
onEntered: {
//baserect.color = "gray"
}
onExited: {
//baserect.color = 'white'
}
onClicked: {
listView.currentIndex = index
}
}
}
}
focus: true
highlight: Rectangle {
z:1
color: "#77B5D3E7";
radius: 0 }
ScrollIndicator.horizontal: ScrollIndicator { }
ScrollIndicator.vertical: ScrollIndicator { }
}
}
更新2019-05-08 :
UTable{
id:_table
onCurrentIndexChanged: {
console.log(currentIndex)
}
byColName: true
model: [{"name":"test","family":"test2","number":5,"status":"online"},{"name":"ali","family":"alavi","number":2,"status":"offline"}]
headerModel : [
{
"title":"نام",
"name":"name",
"width":0.3
},{
"title":"خانوادگی",
"name":"family",
"width":0.2
},{
"title":"وضعیت",
"name":"status",
"width":0.25
},{
"title":"شماره",
"name":"number",
"width":0.25
}
]
}
和示例:
{{1}}