2016-01-23 56 views
0

所以这个主题基本上是我所要求的。如何在rowdelegate中制作一个矩形边框(TableVIew)

TableViewStyle 
{ 

    Component { 

     id: header 
     Rectangle { 
      anchors.topMargin: 5 
      height: 22 
      anchors.verticalCenter: parent.verticalCenter 
      color: "#6d6e70" 
      Text { 
       anchors.fill: parent 
       anchors.verticalCenter: parent.verticalCenter 
       horizontalAlignment: Text.Center 
       verticalAlignment: Text.AlignVCenter 
       text: styleData.value 
       color: "white" 
       renderType: Text.NativeRendering 
      } 
      Rectangle { 
       anchors.right: parent.right 
       anchors.top: parent.top 
       anchors.bottom: parent.bottom 
       anchors.bottomMargin: 1 
       anchors.topMargin: 1 
       width: 1 
       color: "black" 
      } 
     } 
    } 
    Component { 
     id: defaultRow 
     Rectangle { 
      height: 30 
      property color selectedColor: styleData.row % 2 ? "#fbfbfc" : "white" 
      color: styleData.selected ? "#999" : selectedColor 
      Rectangle { 
       width: 1 
       color: "black" 
      } 
     } 

    } 
    Component { 
     id: largeRow 
     Rectangle { 
      height: 120 
      property color selectedColor: styleData.row % 2 ? "#fbfbfc" : "white" 
      color: styleData.selected ? "#999" : selectedColor 
      Rectangle { 
       width: 1 
       color: "black" 
      } 
     } 
    } 

    Component { 
     id: imageDelegate 
     Image { 
      anchors.verticalCenter: parent.verticalCenter 
      anchors.horizontalCenter: parent.horizontalCenter 
      fillMode: Image.PreserveAspectFit 
      cache: true; 
      asynchronous: true; 
      source: styleData.value 
     } 
    } 
} 

页眉有宽度为1和黑色的边框,但对于行如果我用三茗parametrs它甚至没有工作。我如何为rowdelegate生成边框?

回答

1

你能砍类似的东西:

Rectangle { 
    color: "black" 

    Rectangle { 
     anchors.fill: parent 
     anchors.rightMargin: 1 

     color: "white" 
    } 
} 

(不要以为我已经理解了问题)

更新

(感谢Mitch数据为例)

你想要那样的列边框?

enter image description here

import QtQuick 2.3 
import QtQuick.Window 2.2 
import QtQuick.Controls 1.2 
import QtQuick.Controls.Styles 1.2 

Window { 
    id: win 
    width: 360 
    height: 360 
    visible: true 

    ListModel { 
     id: libraryModel 
     ListElement { 
      title: "A Masterpiece" 
      author: "Gabriel" 
     } 
     ListElement { 
      title: "Brilliance" 
      author: "Jens" 
     } 
     ListElement { 
      title: "Outstanding" 
      author: "Frederik" 
     } 
    } 

    TableView { 
     anchors.fill: parent 

     TableViewColumn { 
      role: "title" 
      title: "Title" 
      width: 100 
     } 
     TableViewColumn { 
      role: "author" 
      title: "Author" 
      width: 200 
     } 
     model: libraryModel 

     style: TableViewStyle { 
      itemDelegate: Rectangle { 
       width: 200 
       height: 200 

       color: "black" 

       Rectangle { 
        anchors.fill: parent 
        anchors.rightMargin: 1 

        color: "white" 

        Text { 
         id: textItem 
         anchors.fill: parent 
         verticalAlignment: Text.AlignVCenter 
         horizontalAlignment: styleData.textAlignment 
         anchors.leftMargin: 12 
         text: styleData.value 
         elide: Text.ElideRight 
         color: textColor 
         renderType: Text.NativeRendering 
        } 
       } 
      } 
     } 
    } 
} 
+0

无法检查,直到明天,但我猜你只需填写细胞与黑色。 我需要一个由黑色边框分隔的列表。 –

+0

这是一个黑色矩形上的白色矩形,但白色矩形略小。 – Velkan

+0

https://gyazo.com/933b60ef6e08e5934dde9dc7e766052a 不,它不工作。 –

相关问题