QML 布局管理器之GridLayout 项目demo

一.气体控制效果图

二.界面布局代码实现

//DottedLline.qml  虚线绘制

import QtQuick 2.12
import QtQuick.Shapes 1.12

Shape
{
    id:canvas
    width: parent.width
    height: parent.height
    ShapePath
    {
       strokeStyle: ShapePath.DashLine
       startX: 8
       startY: 10
       dashPattern: [1, 3]
       PathLine{x:canvas.width;y:10}
       PathLine{x:canvas.width;y:canvas.height}
       PathLine{x:8;y:canvas.height}
       PathLine{x:8;y:10}
       fillColor: "transparent"
       strokeColor: "black";
       strokeWidth: 2;
    }
}

// GasControl.qml  气体控制界面布局

import QtQuick 2.0
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import QtQuick.Controls 1.4
import QtQuick.Shapes 1.