GridView的代表太大

Question

我有以下QML GridView：

GridView 
{ 
    id: uePlacesGridView 

    antialiasing: true 

    Layout.fillWidth: true 
    Layout.fillHeight: true 
    Layout.margins: 8 
    Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom 
    flow: GridView.FlowLeftToRight 

    layoutDirection: Qt.LeftToRight 

    clip: true 

    cellWidth: 64 
    cellHeight: 64 

    highlightFollowsCurrentItem: true 
    highlightRangeMode: GridView.StrictlyEnforceRange 

    snapMode: GridView.SnapToRow 

    Component.onCompleted: 
    { 
     model=uePlacesModel 
    } 

    delegate: UeButton 
    { 
     id: uePlacesModelDelegate 

     width: uePlacesGridView.width-16 
     height: uePlacesGridView.height-16 

     ueText: model.ueRoleName 
     ueSoundOn: false 

     onUeSignalButtonClicked: 
     { 
      ueApplicationStatus.ueAddLoggedUser(ueUserInfoListView.model.get(ueUserInfoListView.currentIndex).ueRoleName, 
               uePlacesGridView.model.get(uePlacesGridView.currentIndex).ueRoleId); 
      ueKeypadOpacityAnimator.running=true 
      ueCentralWidgetAnimator.running=true 
      ueOperationsToolBarAnimator.running=true 

      ueCentralWidget.visible=true 
      ueCentralWidget.enabled=true 

      ueOperationsToolBar.visible=true 
      ueOperationsToolBar.enabled=true 
     } // onUeSignalButtonClicked: 
    } // delegate 
} // GridView 

其委託的自定義按鈕，命名爲UeButton：

import QtQuick.Controls 1.4 
import QtQuick 2.5 
import QtQuick.Layouts 1.2 
import QtMultimedia 5.5 

Rectangle 
{ 
    id: ueButton 

    property string ueText 
    property bool ueSoundOn: false 

    signal ueSignalButtonClicked 

    gradient: Gradient 
    { 
     GradientStop 
     { 
      position: 0 

      color: "#ffffff" 

      SequentialAnimation on color 
      { 
       id: ueButtonClickAnimation 

       loops: 1 
       running: false 

       ColorAnimation 
       { 
        from: "#ffffff" 
        to: "#000000" 
        duration: 25 
       } // ColoueSoundOnrAnimation 

       ColorAnimation 
       { 
        from: "#000000" 
        to: "#ffffff" 
        duration: 25 
       } // ColorAnimation 
      } // SequentialAnimation 
     } // GradientStop 

     GradientStop 
     { 
      position: 0.418 

      color: "#000000" 
     } // GradientStop 
    } // Gradient 

    border.color: "steelblue" 
    border.width: 1 
    radius: 4 

    antialiasing: true 
    smooth: true 

    ColumnLayout 
    { 
     anchors.fill: parent 

     Text 
     { 
      text: ueText 

      Layout.fillWidth: true 
      Layout.fillHeight: true 
      Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter 

      color: "#ffffff" 
      font.bold: true 
      verticalAlignment: Text.AlignVCenter 
      horizontalAlignment: Text.AlignHCenter 
      font.pointSize: 16 
      textFormat: Text.RichText 
     } // Text 
    } // ColumnLayout 

    MouseArea 
    { 
     id: ueButtonMouseArea 

     anchors.fill: parent 

     onClicked: 
     { 
      if(ueSoundOn===true) 
      { 
       ueButtonPressSound.play() 
      } 
      ueButtonClickAnimation.running=true 
      ueButton.ueSignalButtonClicked() 
     } 
    } // MouseArea 

    SoundEffect 
    { 
     id: ueButtonPressSound 

     source: "qrc:///ueSounds/sounds/UeButtonClick.wav" 
    } // SoundEffect 
} // ueButton 

爲什麼代表巨大的，重疊的（我已經設置cellWidth和cellHeight在GridView內），如截圖所示？

Answer 1

在這裏被修正的代碼：

GridView 
{ 
    id: uePlacesGridView 

    antialiasing: true 

    Layout.fillWidth: true 
    Layout.fillHeight: true 
    Layout.margins: 8 
    Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom 
    flow: GridView.FlowLeftToRight 

    layoutDirection: Qt.LeftToRight 

    clip: true 

    cellWidth: 192 
    cellHeight: 128 

    highlightFollowsCurrentItem: true 
    highlightRangeMode: GridView.StrictlyEnforceRange 

    snapMode: GridView.SnapToRow 

    Component.onCompleted: 
    { 
     model=uePlacesModel 
    } 

    delegate: UeButton 
    { 
     id: uePlacesModelDelegate 

     width: uePlacesGridView.cellWidth-16 
     height: uePlacesGridView.cellHeight-16 

     ueText: model.ueRoleName 
     ueSoundOn: false 

     onUeSignalButtonClicked: 
     { 
      ueApplicationStatus.ueAddLoggedUser(ueUserInfoListView.model.get(ueUserInfoListView.currentIndex).ueRoleName, 
               uePlacesGridView.model.get(uePlacesGridView.currentIndex).ueRoleId); 
      ueKeypadOpacityAnimator.running=true 
      ueCentralWidgetAnimator.running=true 
      ueOperationsToolBarAnimator.running=true 

      ueCentralWidget.visible=true 
      ueCentralWidget.enabled=true 

      ueOperationsToolBar.visible=true 
      ueOperationsToolBar.enabled=true 
     } // onUeSignalButtonClicked: 
    } // delegate 
} // GridView