一个qml文件用来在另外一个qml文件中生成2个对象,重用qml文件作为组件

      在工作中遇到一些情况,写了一个  Dialog.qml文件,想在Use.qml中多次使用他,并改变Dialog.qml中的一些控件的各种属性,上网了解了一些资料和自己实践总结出3中方法吧。

1. **

如果想要在A.qml中调用B.qml中的buttonB1的属性值,需要在B.qml中加入A{id:我是A},这样就可以使用id:我是A,来使用B.qml中的那些属性和方法

不是C++的那种,我A想要使用B,我把B组合到A中,qml是把A方放到B中,直接用A来调用B中的属性和方法

**

2. **

如果1和2是平级,那么建立一个包含他们2的一个上级,在上级建立参数,由上级的参数来实现1,2的数据交换

**

3. 这个是我自己实践出来的,有相关的代码,上菜:

扫描二维码关注公众号,回复: 4897760 查看本文章

AssemblyTo.qml:

       

import QtQuick 2.0

import QtQuick.Layouts 1.3

import QtQuick.Window 2.3

import QtQuick.Controls 2.2

Item {

    id:parentItem

    width: 200

    height: 200

    function changeColor(){

        childRectangle.color="blue";

    }

    function changeText(){

       // childRectangle.childText.text="blue";这种通过parent.child的方式不能生效

        childText.text="blue";

       childRectangle.changePosition();//可以直接指定child进行相关的属性的一些修改。

 

    }

 

    Rectangle{

        id:childRectangle

        color: "red"

        anchors.fill: parent

        function changePosition()//QML QQuickText: Cannot anchor to an item that isn't a parent or sibling.

        {

            childText.anchors.right=childRectangle.left;//目前没有找到可以在另一个qml文件中改变其空间布局的方法。

             childText.anchors.bottom=childRectangle.bottom;

        }

 

        Text {

            id: childText

            text: qsTr("red")

            font.pixelSize: 24

        }

    }

}

 

 

 

 

main.qml:

  

import QtQuick 2.11

import QtQuick.Window 2.11

import QtQuick.Controls 2.1

//在这里给根元素起名为objectname  ,按钮起名为quitbutton,文本起名为textlabel  ,然后会在C++代码中用这些名字来查找对应的对象并改变他们

Window {

    objectName: "rootObject";

    visible: true

    width: 640

    height: 480

    id:parentWindow

    //title: qsTr("Ni Cai wo zai na")

    AssemblyTo{

        visible: true

        anchors.right: testText.left

        anchors.bottom: testText.bottom

        id:id1

    }

//    function change(){

//        id2.parent.

//    }

 

    AssemblyTo{

        id:id2

        visible: true

        anchors.right: id1.left

        anchors.bottom: id1.bottom

        Component.onCompleted: {

            id2.changeColor();//通过在另一个qml文件中写function,再在这里使用id进行调用,达到重用控件的目的。

            id2.changeText();

        }

 

//        Text {

//            id: reDefine

//            text: qsTr("blue")

//            font.pixelSize: 24

//            anchors.right: parent.right

//            anchors.bottom: parent.bottom

//        }

    }

 

    Button

    {

        anchors.right: parent.right

        anchors.rightMargin: 4

        anchors.bottom: parent.bottom

        anchors.bottomMargin: 4

        text:"quit"

        objectName: "quitButton"

        id:btnQuit

    }

    Text {

        objectName: "textLable";

        text: qsTr("Hello World")

        anchors.right: btnQuit.left

        anchors.bottom:btnQuit.bottom

        font.pixelSize: 26

        id:testText

    }

}

 

 

但是上面我还是没有解决重写布局,从而重用控件的目的。修改一些文本,隐藏一些控件应该都可以采用上面的方法。

 

 

猜你喜欢

转载自www.cnblogs.com/yuzhiboprogram/p/10262251.html