如何更新或读取 TabView 中的 GridLayout 内的文本字段

Posted 2023-02-16

【中文标题】如何更新或读取 TabView 中的 GridLayout 内的文本字段

【英文标题】：How to update or read TextFiled inside GridLayout which is in TabView

【发布时间】：2020-05-31 09:57:43

【问题描述】：

我有下面的组件堆栈，我想读取并设置 TextFiled 的值：

-Rectangle
-----TabView
---------Tab
-----------Rectangle 
--------------GridLayout
------------------Rectangle 
--------------------TextField <--- I want to access this TextField

我也有需要在 Tab 内访问 Repeater 的情况：

-Rectangle
-----TabView
---------Tab
-----------Rectangle 
--------------GridLayout
------------------Repeater 
--------------------TextField <--- I want to access this TextField also

我尝试使用以下方式访问它：

var tab0 = myTabView.getTab(0);
tab0.children[0].text = "Some Text"; // I get Undefined Error 

我尝试使用Tab 中的函数访问组件：

import QtQuick 2.0
import QtQuick.Controls 2.14 as QQC2
import QtQuick.Layouts 1.14
import QtQuick.Controls 1.4 as QQC1

QQC2.Item 

QQC1.TabView 

  QQC1.Tab 
    title: "tab1"

    function printValue ()  
      console.log("myTextFld.txt: "+myTextFld.txt);  // <-- Getting Error myTextFld undefined.
    

    Rectangle 
      id: tabHolderRext
      color: "blue"

      GridLayout 
        id: myGrid
        model: 7

        Repeater 
          id: herderRepeater
          model: header
          delegate: Rectangle 
            TextField 
              // I want to Access This TextField also 
            
          
        

        Rectangle 
          id: row0Rect
          Layout.row: 0
          Layout.column: index

          TextFiled 
            id: myTextFld
            text: modelData
               
        

        // Rest of the rows 
    
    

【问题讨论】：

旧的TabView 使用了一种延迟加载的概念。请改用TabBar 和StackLayout。

【参考方案1】：

如果您的所有项目都在同一个 qml 文件中，则项目 id 可用于访问 TextField 中的值。如果您有不同的 qml 文件，请使用 alias types link 来访问这些值。

Repeater 案例：Textfield 必须先更新底层模型view --> model，然后我们才能使用模型的数据。

这是一个示例代码。我已将所有项目堆叠在同一个 qml 文件中，以便通过 id 进行访问。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window 
    visible: true
    width: 640
    height: 480

    Item 
        anchors.fill: parent
        anchors.margins: 10

        TabView 
            anchors.fill: parent
            Tab 
                title: "TextField"

                Item 
                    anchors.fill: parent
                    Grid 
                        spacing: 20
                        anchors.fill: parent
                        anchors.margins: 10
                        Rectangle 
                            height: 40
                            width: 150
                            TextField 
                                id: inputId
                                anchors.fill: parent
                                placeholderText: "enter text"
                            
                        

                        Button 
                            height: 40
                            width: 150
                            text: "show txt"
                            onClicked: labelId.text = inputId.text
                        

                        Rectangle 
                            height: 40
                            width: 150
                            Label 
                                id: labelId
                                anchors.fill: parent
                                horizontalAlignment: Text.AlignHCenter
                                verticalAlignment: Text.AlignVCenter
                            
                        
                    
                
            
            Tab 
                title: "Repeater"

                Item 
                    anchors.fill: parent
                    Grid 
                        spacing: 20
                        anchors.fill: parent
                        anchors.margins: 10
                        columns: 3

                        ListModel 
                            id: fruitModel
                            ListElement  name: "Apple" 
                            ListElement  name: "Orange" 
                            ListElement  name: "Banana" 
                        

                        Repeater 
                            width: parent.width
                            height: parent.height / 2
                            model: fruitModel
                            delegate: Rectangle 
                                height: 40
                                width: 150
                                TextField 
                                    anchors.fill: parent
                                    text: name
                                    onTextChanged: fruitModel.setProperty(index, "name", text) // update model data
                                
                            
                        

                        Repeater 
                            width: parent.width
                            height: parent.height / 2
                            model: fruitModel
                            delegate: Rectangle 
                                height: 40
                                width: 150
                                Label 
                                    text: name
                                    anchors.fill: parent
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter