QML笔记-使用Row的时候要注意的地方（一定要指明高度和宽度）

目录

 

 

错误实例

正确实例

---

 

错误实例

运行截图如下：

此时对应的源码如下：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Row{

        x: 10
        y: 10
        spacing: 10

        Rectangle{

            id: firstNameRectId
            width: firstNameLabelId.implicitWidth + 20
            height: firstNameLabelId.implicitHeight + 20
            color: "beige"

            Text {
                id: firstNameLabelId
                anchors.centerIn: parent
                text: qsTr("FistName: ")
            }
        }

        Rectangle{

            id: firstNameTextRectId
            color: "beige"
            //width: firstNameTextId.implicitWidth  + 20
            //height: firstNameTextId.implicitHeight + 20


            TextInput{

                id: firstNameTextId
                anchors.centerIn: parent
                focus: true
                text: "Type in your first name"
                onEditingFinished: {

                    console.log("The first name changed to : " + text)
                }
            }
        }
    }
}

 

正确实例

运行截图如下：

要注意的地方，在Row里面每一个都要指明宽度和高度：

这里是把Type in your first name的指明了！

width: firstNameTextId.implicitWidth  + 20
height: firstNameTextId.implicitHeight + 20

源码如下：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Row{

        x: 10
        y: 10
        spacing: 10

        Rectangle{

            id: firstNameRectId
            width: firstNameLabelId.implicitWidth + 20
            height: firstNameLabelId.implicitHeight + 20
            color: "beige"

            Text {
                id: firstNameLabelId
                anchors.centerIn: parent
                text: qsTr("FistName: ")
            }
        }

        Rectangle{

            id: firstNameTextRectId
            color: "beige"
            width: firstNameTextId.implicitWidth  + 20
            height: firstNameTextId.implicitHeight + 20


            TextInput{

                id: firstNameTextId
                anchors.centerIn: parent
                focus: true
                text: "Type in your first name"
                onEditingFinished: {

                    console.log("The first name changed to : " + text)
                }
            }
        }
    }
}