zoukankan      html  css  js  c++  java
  • qml: 组件复用

    在编写组件时,使用下面两种方法可以实现组件的复用:

    import QtQuick 2.0
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.4 as Controls
    import Global 1.0
    import "qrc:/materialUI/core"
    Controls.ApplicationWindow {
        id: dg;
         Math.max(content.width+ 32,minimumWidth);
        height:  content.height + 32 +
                     buttonContraner.height + 16;
        visible:  false;
        default  property alias content: content.data;      //默认属性;
        property alias buttons: buttonView.children;        //引用;
        signal  rejected();
    
        property string nextButtonText: "下一步"
        property string negetiveButtonText: "取消"
    
        minimumWidth: 300;
    
        View{
            anchors.fill: parent;
            backgroundColor: "#ffffff"
            Item{
                id : contrainer;
                  content.implicitWidth;
                 height:  content.height;
                 anchors{
                        left: parent.left;
                        right:  parent.right;
                        top: parent.top;
                        leftMargin: 16;
                        topMargin:  16;
                        rightMargin:  16;
                  }
    
    
                 Item{
                     id: flickItem;
                     clip: true;
                     anchors.fill: parent;
                     Column{
                         id: content;
                         spacing: Global.margin;
                    }
                 }
            }
    
    
    
            Item{
                id: buttonContraner;
                anchors{
                    left: parent.left;
                    right: parent.right;
                    bottom: parent.bottom;
                    bottomMargin: 8;
                }
                height: negetiveButton.implicitHeight + 8;
                clip: true;
                View{
                    id: buttonView;
    
                   // backgroundColor: dg.color;
                    elevation: 0;
                    fullWidth: true;
                    elevationInverted:  true;
                    anchors{
                        bottom: parent.bottom;
                        right:  parent.right;
                        left: parent.left;
                    }
                }
            }
        }
    
    
    
    
        function open()
        {
            dg.visible = true;
        }
        function close()
        {
            dg.visible = false;
        }
    
        Component.onCompleted: {
            console.log(content.height + " " + buttonContraner.height )
        }
    }

    1. 默认属性;

      每一个qml组件仅有一个default  property属性。

            如上述代码; 通过申明默认属性,在使用该组件时,qml会自动将子成员对象插入到指定的位置;

    2.引用;

          在上述代码中;

       property alias buttons: buttonView.children;   

         该表示即为引用,通过对buttons进行赋值,也能实现指定域扩展;

  • 相关阅读:
    ES6关于Promise的用法
    JS进阶篇--JS数组reduce()方法详解及高级技巧
    JavaScript常用数组操作方法,包含ES6方法
    揭密 Vue 的双向绑定
    JavaScript(E5,6) 正则学习总结学习,可看可不看!
    利用scons构建project
    cuda核函数再调用核函数,多层并行
    使用微信JSSDK实现图片上传
    android 自己定义水平和圆形progressbar 仅仅定义一些style就能够
    [LeetCode] 035. Search Insert Position (Medium) (C++)
  • 原文地址:https://www.cnblogs.com/yinwei-space/p/8693293.html
Copyright © 2011-2022 走看看