• 周六. 8月 20th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

Qml之横纵布局

admin

11月 28, 2021

Qml中布局组件包括:Row、Column、Grid、Flow、嵌套布局。

具体的区别参见:

https://www.qter.org/forum.php?mod=viewthread&tid=20745

https://cloud.tencent.com/developer/article/1816914

https://juejin.cn/post/6886278061877755911

https://www.cnblogs.com/linuxAndMcu/p/11945219.html

实现一个普通的多层级编辑框

第一视觉感官,这是一个网格布局(Grid)—-三横两纵,整整齐齐。

但是,这样的布局并不适合去使用Grid。

原因:

1、Grid多用于布局相同的控件,从上图看,里面既有文本又有编辑框,要做对应的处理。对比于row+column可能会更加冗余。

Grid较为适用的场景,比如

注:如果真有这么标准、整齐的需求,建议直接使用Repeater。

2、有一个特殊点,第一列的文本右对齐。大部分的控件中,在对齐方面都是默认采用左对齐。因此,此处就需要特殊化的处理。

3、后续功能的迭代或修改。比如添加一行非编辑框,而是下拉框等。可能会加大修改的难度或重构等。比如

基于上述的几个原因,这样的需求样式,最好使用Row+Column。

独行侠:Grid

双剑合璧:Row+Column

基本思路:从简单到复杂、从整体到局部

从例子里剖析:

 

一、整体布局、风格思考

风格:三横两纵

设计一:先从横向出发,再从纵向出发。三横->两纵

实现:

Row{



Column{

}

Column{

}



}

设计二:先从纵向出发,在从横向出发。两纵→三横

实现:

Column{



Row{

}

Row{

}

Row{

}



}

二、局部组件选择和调整

组件选择

  • 文本框:Text、Label
  • 编辑框:TextFeild、TextInput

组件调整

  • 位置
  • 颜色
  • 样式
  • 大小

设计一的实现方式:

Row{



Column{

Label{

}

Label{

}

Label{

}

}//Column



Column{

TextField{

}

TextField{

}

TextField{

}

}//Column



}//Row

设计二的实现方式

Column{



Row{

Label{

}

TextField{

}

}//Row



Row{

Label{

}

TextField{

}

}//Row



Row{

Label{

}

TextField{

}

}//Row



}//Column

小技巧:在布局控件外部嵌套一个Rectangle。

作用:

1、对外。这个Rectangle控制着相对位置。即相对于整个界面、相邻控件的位置、偏移等。目的:可以实现整体的挪移。

2、对内。内部控件、组件的调整,只需要关心与外部Rectangle的相对偏移,根本不需要联系到整个界面。

最终实现

// 定义参数,每行的高度
property int rowHeight: 32
// 定义参数,每行中,每列的间距
property int rowSpacing: 16
// 定义参数,每列中,每行的间距
property int colSpacing :24
Rectangle{
    anchors.top:parent.top
    anchors.topMargin:112
    anchors.horizontalCenter: parent.horizontalCenter
     460
    height: 240
    Column{
        anchors.fill: parent
        // 定义Column中,每行Row的间距
        spacing: colSpacing
 
        //first row
        Row{
            // 宽度取Page的0.8
             parent.width * 0.8
            height: rowHeight
            spacing: rowSpacing
            // Row水平居中显示
            anchors.horizontalCenter: parent.horizontalCenter
 
            Label{
                text: "网络名称(SSID)"
                font.family: "Microsoft YaHei"
                color: "#D9000000"
                font.pixelSize: 14
                // 定义垂直居中显示
                verticalAlignment: ssidData.verticalAlignment
                // 显示字符,水平靠右显示
                horizontalAlignment: Text.AlignRight
                // 设置宽度,Row的宽度的0.3
                 parent.width * 0.3
                height: parent.height
 
            }
            TextField{
                id:ssidData
                placeholderText: "请输入"
                font.family: "Microsoft YaHei"
                color: "#D9000000"
                font.pixelSize: 14
                240
                height: 32
                background: Rectangle {
                    border.color: "#26000000"
                }
            }
        }//Row
 
 
        // second row
        Row{
             parent.width * 0.8
            height: rowHeight
            spacing: rowSpacing
            anchors.horizontalCenter: parent.horizontalCenter
 
            Label{
                text: "网络密码"
                verticalAlignment: ssidPsdData.verticalAlignment
                horizontalAlignment: Text.AlignRight
                font.family: "Microsoft YaHei"
                color: "#D9000000"
                font.pixelSize: 14
                 parent.width * 0.3
                height: parent.height
 
            }
 
            TextField{
                id: ssidPsdData
                placeholderText: "请输入"
                font.family: "Microsoft YaHei"
                //color: "#40000000"
                font.pixelSize: 14
                240
                height: 32
                background: Rectangle {
                    border.color: "#26000000"
                }
            }
        }// Row
 
 
        // third row
        Row{
             parent.width * 0.8
            height: rowHeight
            spacing: rowSpacing
            anchors.horizontalCenter: parent.horizontalCenter
 
            Label{
                text: "加密模式"
                verticalAlignment: secretType.verticalAlignment
                horizontalAlignment: Text.AlignRight
                font.family: "Microsoft YaHei"
                color: "#D9000000"
                font.pixelSize: 14
                 parent.width * 0.3
                height: parent.height
 
            }
 
            TextField{
                id:secretType
                placeholderText: "请输入"
                font.family: "Microsoft YaHei"
                //color: "#40000000"
                font.pixelSize: 14
                240
                height: 32
                background: Rectangle {
                    border.color: "#26000000"
                }
            }
        }// Row
    }// Column
}//Rectangle

注意点:

1、一般的组合使用是:Label+TextField。而不是Text+TextField、Label+TextInput,不过还是实际根据需求选择吧。

2、要实现文本右对齐。Row中的Label一定要设置width,否则都是左对齐或乱序。即使配置了“horizontalAlignment: Text.AlignRight”,也是不生效的。

3、如果嵌套了Rectangle,在内部的Column或Row就必须设置“anchors.fill: parent”。否则,无法精确计算控件的相对偏移。

4、左边文本相对于右边编辑框的垂直居中,可以这么设置“verticalAlignment: ssidData.verticalAlignment”。

发表回复

您的电子邮箱地址不会被公开。