qt qml使用踩坑指南

最近要用qt开发一个手机蓝牙app,蓝牙demo已经写好(包含客户端和服务端),过两天整理下发上来.先把qml踩的坑记录下

01　　qml布局,,,,最好使用动态布局方式,头尾可以使用固定的大小,中间可以使用比例,或者全部都可以使用比例进行设计,

　　　注意一点,anchors貌似不可以使用数据计算的方式,但是width和height可以　　eg　　height:(parent.height-rect1.height-rect6.height)*0.6

02　　qml制作动态按钮时候,每个按钮之间最好使用column进行隔离,按钮之间不要使用margin,,不然按钮动态效果会影响其他的按钮.动态按钮的制作如下

import QtQuick 2.12
import QtQuick.Controls 2.12
 
Button {
    signal buttonClick()
 
    id: btnmousearea00
    width: 65
    height: 40
    background: Rectangle {
        id: btnmouseareabg0011
        radius: 3
        color: "#0066FF"
    }
 
    MouseArea {
        anchors.fill: parent
        onPressed: {
            btnmousearea00.width = btnmousearea00.width + 7
            btnmousearea00.height = btnmousearea00.height + 5
            btnmouseareabg0011.color = "#66FF00"
        }
 
        onReleased: {
            btnmousearea00.width = btnmousearea00.width - 7
            btnmousearea00.height = btnmousearea00.height - 5
            btnmouseareabg0011.color = "#0066FF"
 
        }
 
        onClicked: {
            buttonClick()
        }
    }
}

　　　　按钮之间的分割如下

import QtQuick 2.12
import QtQuick.Controls 2.12
 
Rectangle {
 
    property int btnwidth: 65
 
    width: parent.width
    //height: 48
    color: "lightgrey"
 
 
    Text {
        id: btnmiddle00
        anchors.centerIn: parent
    }
 
 
    Column{
        width: parent.width/3
        anchors.centerIn: parent
        MyButton {
            anchors.centerIn: parent
 
            text: "读取"
    //                icon.name: "home"
    //                icon.color : "transparent"
    //                action: homeAction
            //font.pointSize: 16
 
            onClicked: console.log("123");
        }
    }
 
    Column{
        width: parent.width/3
        anchors.verticalCenter: btnmiddle00.verticalCenter
        anchors.right: btnmiddle00.left
        anchors.rightMargin: btnwidth/2
//        anchors.rightMargin: 10 + btnwidth/2
        MyButton {
            anchors.centerIn: parent
            text: "写入"
 
            //onClicked: console.log()
        }
    }
    Column{
        width: parent.width/3
        anchors.verticalCenter: btnmiddle00.verticalCenter
        anchors.left: btnmiddle00.right
        anchors.leftMargin: btnwidth/2
        MyButton {
            anchors.centerIn: parent
            text: "初始值"
        }
    }
}

03　　可以自己定义一些模块之间某些信息可以使用变量传递进去,如下

04　　一个非常奇葩的bug,气的我都不想记下来,上图的BoxRadoiBtn2有个//　　anchors.fill:parent

　　这句话看着没问题,意思是继承父类的全部空间,但是,在scrollview中就有大问题了,正常情况下,我的程序运行时这样的 (左边)

　　加上这一句之后,就变天了,程序就变成了这样色儿的,这玩意儿给我头疼的,整了,一下午时间就浪费在这破玩意儿上了,反反复复就是一句代码的事儿.　　

05　　使用rectangle做测试的时候,注意父子之间一定要看一看空间关系,rectangle大小最好指定好,,最好能带上文字,因为文字一定程度上可以不受尺寸的约束

06　　可以使用rectangle制作一个空格块,用来占位置,颜色使用transparent,属于透明色,宽度的话,我建议用主程序中的id,width这个参数然后乘以一定的百分比,高低1就好

　　使用时候可以根据需要设置宽度高度颜色,非常合适.我自己制作的如下,其中applicationwindow是主窗体id

import QtQuick 2.0
//透明的颜色，用于占空间，其中宽度可以随意更改，绝对有效，比label更稳定
Rectangle {
 
    //percentage是全屏宽度百分比
    property int percentage: 10
 
    width: percentage/100* applicationWindow.width
    height: 10
    color: "transparent"
}