QML：TableViewとColumn

Question

右にある列は、常に左側の列のデータと重なっていることがわかりました。この動作を変更するには？

影付きパネルはTableViewColumn.delegateに定義されています。私はパネルを右のセルの隣に重ねる必要があります。

//問題を表す最小限のコード例！それへのクリーンな解決策はありませんcodeから判断

Page { 
    TableView { 
     anchors.fill: parent 
     selectionMode: 1 

     TableViewColumn { 
      role: "login" 
      title: "Login" 
      width: 100 

      delegate: Rectangle { 
       color: "transparent" 
       anchors.fill: parent 
       Rectangle { 
        anchors.verticalCenter: parent.verticalCenter 
        height: 40 
        width: 150 
        color: "green" 
       } 
      } 
     } 

     TableViewColumn { 
      role: "fullName" 
      title: "FullName" 
      width: 100 

      delegate: Rectangle { 
       color: "transparent" 
       anchors.fill: parent 
       Rectangle { 
        anchors.verticalCenter: parent.verticalCenter 
        height: 30 
        width: 150 
        color: "red" 
       } 
      } 
     } 

     TableViewColumn { 
      role: "status" 
      title: "Status" 
      width: 100 

      delegate: Rectangle { 
       color: "transparent" 
       anchors.fill: parent 
       Rectangle{ 
        anchors.verticalCenter: parent.verticalCenter 
        height: 20 
        width: 150 
        color: "blue" 
       } 
      } 
     } 

     model: ListModel { 
      ListElement { text: "ghdjbf" } 
      ListElement { text: "sgkjdnf" } 
      ListElement { text: "sgkjdnf" } 
      ListElement { text: "sgkjdnf" } 
      ListElement { text: "sgkjdnf" } 
     } 

     property Component headerDelegate: BorderImage { 
      property bool sortSwitcher: false 
      height: 40 
      id: tableHeader 
      objectName: "TableHeader" 

      Rectangle { 
       id: viewableSection 
       anchors.fill: parent 
       color: "white" // "#f2f2f2" 

       Text { 
        id: textItem 
        anchors.top: parent.top 
        anchors.bottom: parent.bottom 
        anchors.left: parent.left 

        verticalAlignment: Text.AlignVCenter 
        horizontalAlignment: Text.AlignLeft 
        anchors.leftMargin: 25 
        font.pixelSize: 11 
        font.family: "Roboto" 
        text: styleData.value 
        font.bold: true 
        elide: Text.ElideRight 
        color: "#646464" 
        renderType: Text.NativeRendering 
       } 

       Rectangle { 
        id: bottomHeaderBorder 
        anchors.top: parent.bottom 
        anchors.left: parent.left 
        anchors.right: parent.right 
        height: 1 
        color: "#ebebeb" 
       } 

       Rectangle { 
        id: headerSeparator 
        z: 1 
        anchors.left: parent.right 
        anchors.top: parent.top 
        anchors.bottom: parent.bottom 
        anchors.bottomMargin: 8 
        anchors.topMargin: 8 
        width: 1 
        color: "lightgrey" 

        MouseArea { 
         id: mouseAreaSeparator 
         hoverEnabled: true 
         anchors.fill: parent 
         cursorShape: Qt.SizeHorCursor 
         onEntered: { 
          mouseAreaSeparator.cursorShape = Qt.SizeVerCursor 
         } 
        } 
       } 
      } 
     } 

     property Component rowDelegate: Rectangle { 
      id: rowDel 
      objectName: "RowDelegate" 
      height: 50 
      //property color selectedColor: styleData.hasActiveFocus ? primaryColor : secondaryColor 
      property bool selectionMaskVisible 
      property bool selected: false 

      Rectangle { 
       id: rowSelectionMask 
       anchors.fill: parent 
       color: rowDel.selectionMaskVisible ? "#f2f2f2" : "#ffffff" 
       visible: parent.activeFocus ? false : true 
       z: parent.activeFocus ? 1 : 2 
      } 

      Rectangle { 
       id: activeFocusMask 
       anchors.fill: parent 
       color: parent.activeFocus ? styleData.row !== undefined ? secondaryColor : "White" : "White" 
       opacity: styleData.row !== undefined ? 0.9 : 0 
       z: parent.activeFocus ? 2 : 1 
      } 

      MouseArea { 
       id: rowMouseArea 
       anchors.fill: parent 
       hoverEnabled: true 

       acceptedButtons: Qt.LeftButton | Qt.RightButton 

       onEntered: { 
        if (styleData.row !== undefined) 
        { 
         rowDel.selectionMaskVisible = true 
        } 
       } 
       onExited: { 
        rowDel.selectionMaskVisible = false 
       } 
      } 

      Rectangle { 
       id: bottomBorder 
       objectName: "BottomBorder" 
       z: 2 
       anchors.bottom: parent.bottom 
       height: 1 
       width: parent.width 
       color: "#ebebeb" 
       opacity: styleData.row !== undefined ? 1 : 0 
      } 
      Rectangle { 
       id: separator 
       z: 1 
       anchors.left: parent.right 
       anchors.top: parent.top 
       anchors.bottom: parent.bottom 
       anchors.bottomMargin: 1 
       anchors.topMargin: 1 
       width: 1 
       color: "red" 
      } 
     } 
    } 
} 

Answer 1

。

TableViewColumnの代理人は、によってRepeaterを介してにインスタンス化されています。しかしないdelegate自体の（これは、同じLoaderの子供たちに影響を与えるよう）が、Loaderの -

だから第二カラムの上に最初の列を取得変更するには、我々は z -indexを変更する必要があります。これは、例えば、 Component.onCompleted-ハンドラで達成することができる。

TableViewColumn { 
    role: "login" 
    title: "Login" 
    width: 100 

    delegate: Rectangle { 
     color: "transparent" 
     anchors.fill: parent 
     Component.onCompleted: parent.z = 3 // <- Put the loader on top of its siblings 
     Rectangle { 
      anchors.verticalCenter: parent.verticalCenter 
      height: 40 
      width: 150 
      color: "green" 
     } 
    } 

    Component.onCompleted: console.log(Object.keys(this)) 
}