如何设置行的背景颜色？

Question

我正在尝试为我的应用程序中的 Row 元素提供背景颜色。 到目前为止，我用矩形存档了它，但它弄乱了 MouseArea

中的图像

这是我的代码：-

import QtQuick.Controls  2.4
import QtQuick 2.11

ApplicationWindow {

        id:rootAppWin
        width:640
        height:480
        visible: true

        StackView {

                id: rooAppStack
                anchors.bottomMargin: 50
                anchors{
                        fill:parent
                }
        }

        //Bottom Buttons
        Row{

                Rectangle {
                        color: "#19d4d4d4"
                        anchors.fill:parent
                }

                id:rootNavButtons
                anchors{
                        top: rooAppStack.bottom
                        right: parent.right
                        bottom: parent.bottom
                        left: parent.left
                        topMargin: 5
                }

                MouseArea {
                        id:marootback
                        width: parent.width/2
                        height: parent.height
                        Image {
                                id: marootbackimg
                                fillMode: Image.PreserveAspectFit
                                source: "qrc:/img/sideswipe.svg"
                                anchors.fill:parent
                        }
                }

                MouseArea {
                        id:maroothome
                        width: parent.width/2
                        height: parent.height
                        Image {
                                id: maroothomeimg
                                fillMode: Image.PreserveAspectFit
                                source: "qrc:/img/tent.svg"
                                anchors.fill:parent
                        }
                }


        }
}

它弄乱了图像：-

没有矩形效果很好，但我无法设置背景颜色。我该怎么办？

Answer 1

将行放入矩形

    Rectangle {
            color: "#19d4d4d4"
            anchors{
                    top: rooAppStack.bottom
                    right: parent.right
                    bottom: parent.bottom
                    left: parent.left
                    topMargin: 5
            }
            Row{
                    anchors.fill:parent
                    id:rootNavButtons
                    MouseArea {
                            id:marootback
                            width: parent.width/2
                            height: parent.height
                            Image {
                                    id: marootbackimg
                                    fillMode: Image.PreserveAspectFit
                                    source: "qrc:/img/sideswipe.svg"
                                    anchors.fill:parent
                            }
                    }

                    MouseArea {
                            id:maroothome
                            width: parent.width/2
                            height: parent.height
                            Image {
                                    id: maroothomeimg
                                    fillMode: Image.PreserveAspectFit
                                    source: "qrc:/img/tent.svg"
                                    anchors.fill:parent
                            }
                    }

            }

    }