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

以下是更正后的代码：

* {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}