QML 从无到有

Posted 2020-08-11 Sam Fang

小公司，没办法，什么都得自己亲自来。

服务端是MVC，现在需要可PC客户端和移动APP。

考虑到网页应用有很多界面框架，可以做出很漂亮的界面来，就尝试着使用nwjs来实现，可是在使用了2天的nwjs后，鄙人能力有限，而且文档资料有限，被迫放弃，转而使用Qt来开发，想着反正都不熟悉，就用QML来开发，好在熟悉起来很快，文档也很多，中间很多坑，下面就记录这些过程。

1.子控件可以直接调用父控件的方法

2.ScrollView默认的滚动条太丑，可以通过style: ScrollViewStyle自定义。

ScrollView {
            id:scroll
            width: parent.width
            height: parent.height - get_y(23)

            Column
            {
                id:machineList
            }


            style: ScrollViewStyle {
                    //transientScrollBars: true
                    handle: Item {
                        implicitWidth: get_x(14)
                        implicitHeight: 0
                        Rectangle {
                            color: "#dddddd"
                            anchors.fill: parent
                            anchors.topMargin: get_y(4)
                            anchors.leftMargin: get_x(2)
                            anchors.rightMargin: get_x(2)
                            anchors.bottomMargin: get_y(4)
                        }
                    }
                    scrollBarBackground: Rectangle {
                        implicitWidth: get_x(14)
                        implicitHeight: 0
                        color: "#f0f0f0"
                    }
                    decrementControl: Rectangle {
                        implicitWidth: 0
                        implicitHeight: 0
                    }
                    incrementControl: Rectangle {
                        implicitWidth: 0
                        implicitHeight: 0
                    }
            }
        }

内容都是listitem，都放在Column中

3.动态添加自定义控件

 

 property Component component: null;

 

if(main.component == null){
    main.component = Qt.createComponent("MachineItem.qml");
}
var item;
if(main.component.status == Component.Ready) {
    item = main.component.createObject(machineList, { "x":0, "y" : 0});
}

4.删除动态添加的控件

var list = machineList.children;

for(var i = list.length; i > 0 ; i--) {
    list[i-1].visible = false; 
    list[i-1].destroy();
}

由于是刷新machineList，先删除在重新添加，在安卓平台会有闪烁，设置list[i-1].visible = false;就可以消除。