Question

我正在处理一些应用程序设置QML Window，这里是简约的工作代码：

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.4

Window
{
    width: 512
    height: 512

    flags: Qt.FramelessWindowHint

    visible: true

    ColumnLayout
    {
        anchors.fill: parent

        spacing: 8

        Rectangle
        {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.margins: 8

            radius: 16
            border.color: "#4682b4"
            border.width: 1
            antialiasing: true

            gradient: Gradient
            {
                GradientStop
                {
                    position: 0
                    color: "#636363"
                }   // GradientStop

                GradientStop
                {
                    position: 1
                    color: "#303030"
                }   // GradientStop
            }   // Gradient

            ColumnLayout
            {
                anchors.fill: parent

                RowLayout
                {
                    spacing: 8
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.margins: 8
                    Layout.alignment: Qt.AlignHCenter|Qt.AlignTop

                    antialiasing: true

                    Text
                    {
                        text: qsTr("APPLICATION SETTINGS")
                        clip: true
                        font.bold: true
                        font.pointSize: 24
                        textFormat: Text.RichText
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                    }   // Text
                }   // RowLayout

                ColumnLayout
                {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.margins: 8
                    Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom

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

                        frameVisible: true

                        Tab
                        {
                            asynchronous: true
                            title: qsTr("Database")

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

                            ColumnLayout
                            {
                                spacing: 8
                                Layout.fillWidth: true
                                Layout.fillHeight: true
                                Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

                                TextField
                                {
                                    id: textFieldServerAddress
                                    antialiasing: true

                                    Layout.fillWidth: true
                                    Layout.fillHeight: false

                                    placeholderText: qsTr("database server address")
                                }   // TextField

                                TextField
                                {
                                    id: textFieldServerPort

                                    Layout.fillWidth: true
                                    Layout.fillHeight: false

                                    placeholderText: qsTr("database server port")
                                }   // TextField

                                TextField
                                {
                                    id: textFieldDatabaseName

                                    Layout.fillWidth: true
                                    Layout.fillHeight: false

                                    placeholderText: qsTr("database name")
                                }   // TextField

                                TextField
                                {
                                    id: textFieldDatabaseUsername

                                    Layout.fillWidth: true
                                    Layout.fillHeight: false

                                    placeholderText: qsTr("database access username")
                                }   // TextField

                                TextField
                                {
                                    id: textFieldDatabasePassword

                                    Layout.fillWidth: true
                                    Layout.fillHeight: false

                                    placeholderText: qsTr("database access password")

                                    echoMode: TextInput.PasswordEchoOnEdit
                                }   // TextField

                                RowLayout
                                {
                                    Layout.fillWidth: true
                                    Layout.fillHeight: false
                                    Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
                                    spacing: 8

                                    Button
                                    {
                                        Layout.fillWidth: false
                                        Layout.fillHeight: true
                                        Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter

                                        text: qsTr("Test Connection")

                                        onClicked:
                                        {
                                            print(textFieldServerAddress.text+
                                                  textFieldServerPort.text+
                                                  textFieldDatabaseName.text+
                                                  textFieldDatabaseUsername.text+
                                                  textFieldDatabasePassword.text);
                                        }   // onClicked
                                    }   // Button
                                }   // RowLayout
                            }   // ColumnLayout
                        }   // Tab

                        Tab
                        {
                            asynchronous: true
                            title: qsTr("General")

                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
                        }   // Tab
                    }   // TabView

                    RowLayout
                    {
                        Layout.fillWidth: true
                        Layout.fillHeight: false
                        Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
                        spacing: 8

                        Button
                        {
                            Layout.fillWidth: false
                            Layout.fillHeight: true
                            Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter

                            text: qsTr("Apply")

                            onClicked:
                            {
                                print(textFieldServerAddress.text+
                                      textFieldServerPort.text+
                                      textFieldDatabaseName.text+
                                      textFieldDatabaseUsername.text+
                                      textFieldDatabasePassword.text);
                            }   // onClicked
                        }   // Button

                        Button
                        {
                            Layout.fillWidth: false
                            Layout.fillHeight: true
                            Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter

                            text: qsTr("Clear")

                            onClicked:
                            {
                                textFieldServerAddress.text="";
                                textFieldServerPort.text="";
                                textFieldDatabaseName.text="";
                                textFieldDatabaseUsername.text="";
                                textFieldDatabasePassword.text="";
                            }   // onClicked
                        }   // Button
                    }   // RowLayou
                }   // ColumnLayout
            }   // ColumnLayout
        }   // Rectangle
    }   // ColumnLayout
}   // Window

如您所见，我有三个Button s：

测试连接
应用
清除

现在，如果我填写值并单击测试连接 Button，处理程序onClicked()中的代码将被执行。但是，如果我点击Button 应用或清除，我会收到以下错误：

ReferenceError: textFieldServerAddress is not defined

Wtf，为什么我会收到此错误，如何摆脱它？对于Button的名称，在测试连接中，我使用输入的参数测试数据库连接，在应用中，我将数据库连接参数保存到SQLITE数据库并在清除中清除TextField中的所有值。

Answer 1

来自documentation：

组件范围是组件中对象ID与组件的根对象属性的并集。

另外，我们从here找到：

Tab项继承自Loader并提供类似的API。

因此，您的项目本身就是组件范围，具有自己的规则和可见性。这是因为Loader加载的项目不是周围范围的一部分，而是对其有限的访问权限（主要通过Loader本身公开和提供的内容）

这就是 id 从一个按钮中可见的原因，但它不是来自选项卡中的其他按钮。
您必须重构UI，或者至少将符号导出到可访问的对象中。

ReferenceError：未定义textFieldServerAddress

1 个答案: