我有Qt这个类的子类QQuickImageProvider是requestPixmap函数实现:
QPixmap MyImageProvider::requestPixmap(const QString &id, QSize *size, const QSize
&requestedSize){
int width = 100;
int height = 50;
if (size)
*size = QSize(width, height);
QPixmap pixmap(requestedSize.width() > 0 ? requestedSize.width() : width,
requestedSize.height() > 0 ? requestedSize.height() : height);
pixmap.fill(QColor(id).rgba());
return pixmap;
}
在qml我有GridLayout哪些项目来自图像提供商.通过单击按钮,我可以显示1,2或4项.这是qml文件:
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.1
import QtQuick.Window 2.2
Window{
id: root
title: "settings"
modality: Qt.ApplicationModal
flags: Qt.Dialog
minimumHeight: 700
minimumWidth: 700
maximumHeight: 700
maximumWidth: 700
ColumnLayout{
id: columnLayout
anchors.fill: parent
RowLayout{
ExclusiveGroup{id: exgroup}
Button{
text: "1x1"
checkable: true
checked: true
Layout.minimumWidth: 100
Layout.minimumHeight: 100
exclusiveGroup: exgroup
onCheckedChanged: {
if(checked===true){
grid.columns=1
grid.rows=1
im1.visible = true
im2.visible = false
im3.visible = false
im4.visible = false
im1.source = "image://plotPixmap/yellow"
}
}
}
Button{
text: "1x2"
checkable: true
checked: false
Layout.minimumWidth: 100
Layout.minimumHeight: 100
exclusiveGroup: exgroup
onCheckedChanged: {
if(checked===true){
grid.columns=1
grid.rows=2
im1.visible = true
im2.visible = true
im3.visible = false
im4.visible = false
im1.source = "image://plotPixmap/red"
im2.source = "image://plotPixmap/black"
}
}
}
Button{
text: "2x1"
checkable: true
checked: false
Layout.minimumWidth: 100
Layout.minimumHeight: 100
exclusiveGroup: exgroup
onCheckedChanged: {
if(checked===true){
grid.columns=2
grid.rows=1
im1.visible = true
im2.visible = true
im3.visible = false
im4.visible = false
im1.source = "image://plotPixmap/blue"
im2.source = "image://plotPixmap/green"
}
}
}
Button{
text: "2x2"
checkable: true
checked: false
Layout.minimumWidth: 100
Layout.minimumHeight: 100
exclusiveGroup: exgroup
onCheckedChanged: {
if(checked===true){
grid.columns=2
grid.rows=2
im1.visible = true
im2.visible = true
im3.visible = true
im4.visible = true
im1.source = "image://plotPixmap/blue"
im2.source = "image://plotPixmap/green"
im3.source = "image://plotPixmap/black"
im4.source = "image://plotPixmap/red"
}
}
}
}
GridLayout {
id: grid
Layout.fillHeight: true
Layout.fillWidth: true
Image{
id: im1
Layout.fillHeight: true
Layout.fillWidth: true
sourceSize.height: height
sourceSize.width: width
Layout.rowSpan: 1
Layout.columnSpan: 1
}
Image{
id: im2
Layout.fillHeight: true
Layout.fillWidth: true
sourceSize.height: height
sourceSize.width: width
Layout.rowSpan: 1
Layout.columnSpan: 1
}
Image{
id: im3
Layout.fillHeight: true
Layout.fillWidth: true
sourceSize.height: height
sourceSize.width: width
Layout.rowSpan: 1
Layout.columnSpan: 1
}
Image{
id: im4
Layout.fillHeight: true
Layout.fillWidth: true
sourceSize.height: height
sourceSize.width: width
Layout.rowSpan: 1
Layout.columnSpan: 1
}
}
}
}
在c ++主要:
engine->addImageProvider(QLatin1String("plotPixmap"), new MyImageProvider());
一切正常但是当我按下按钮几次后,底部图像的尺寸变得越来越小.如何修复图像大小？我想要所有图像都是相同的大小,他们shuld填充按钮下的所有空间.
这是不同fillHeight/ fillwidth集合之间相互作用的结果.如文档中所述:
fillWidth和fillHeight属性可以是true或false.如果为false,则项目的大小将固定为其首选大小.否则, 随着布局调整大小,它将在最小和最大大小之间增大或缩小.
在这种情况下,不为四个图像设置最小宽度.因此,当GridLayout结构改变时,根据按下的按钮,重新计算约束并且以某些模式(例如2x1 -> 1x1 -> 2x1)重新计算的宽度/高度给第一图像提供更多空间(根据flow).要解决该问题应确保的最小宽度/高度在每个图像,即设置Layout.minimumWidth和Layout.minimumHeight附加属性具有正确的值.
在代码中直接设置这样的值会导致绑定循环.再次来自文档:
注意:建议不要对布局中项目的x,y,width或height属性进行绑定,因为这会与布局的目标冲突,并且还会导致绑定循环.
为了避免这个问题,GridLayout在被包埋的Item填补了ColumnLayout在地方的GridLayout本身.然后将尺寸约束安全地应用于图像.这是最终的代码:
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.2
Window{
id: root
title: "settings"
modality: Qt.ApplicationModal
flags: Qt.Dialog
minimumHeight: 700
minimumWidth: 700
maximumHeight: 700
maximumWidth: 700
visible: true
ColumnLayout{
id: columnLayout
anchors.fill: parent
RowLayout{
ExclusiveGroup{id: exgroup}
Button{
text: "1x1"
checkable: true
checked: true
Layout.minimumWidth: 100
Layout.minimumHeight: 100
exclusiveGroup: exgroup
onCheckedChanged: {
if(checked){
grid.columns = grid.rows = 1
im1.visible = true
im2.visible = im3.visible = im4.visible = false
im1.source = "image://plotPixmap/yellow"
}
}
}
Button{
text: "1x2"
checkable: true
checked: false
Layout.minimumWidth: 100
Layout.minimumHeight: 100
exclusiveGroup: exgroup
onCheckedChanged: {
if(checked){
grid.columns = 1
grid.rows = 2
im1.visible = im2.visible = true
im3.visible = im4.visible = false
im1.source = "image://plotPixmap/red"
im2.source = "image://plotPixmap/black"
}
}
}
Button{
text: "2x1"
checkable: true
checked: false
Layout.minimumWidth: 100
Layout.minimumHeight: 100
exclusiveGroup: exgroup
onCheckedChanged: {
if(checked){
grid.columns = 2
grid.rows = 1
im1.visible = im2.visible = true
im3.visible = im4.visible = false
im1.source = "image://plotPixmap/blue"
im2.source = "image://plotPixmap/green"
}
}
}
Button{
text: "2x2"
checkable: true
checked: false
Layout.minimumWidth: 100
Layout.minimumHeight: 100
exclusiveGroup: exgroup
onCheckedChanged: {
if(checked){
grid.columns = grid.rows = 2
im1.visible = im2.visible = im3.visible = im4.visible = true
im1.source = "image://plotPixmap/blue"
im2.source = "image://plotPixmap/green"
im3.source = "image://plotPixmap/black"
im4.source = "image://plotPixmap/red"
}
}
}
}
Item { // layout ensure to fill the available space
Layout.fillHeight: true
Layout.fillWidth: true
GridLayout {
id: grid
anchors.fill: parent // anchor to the available space
Image{
id: im1
Layout.fillHeight: true
Layout.fillWidth: true
Layout.minimumWidth: grid.width / 2 // constraint to the min width
Layout.minimumHeight: grid.height / 2 // constraint to the min height
Layout.rowSpan: 1
Layout.columnSpan: 1
}
Image{
id: im2
Layout.fillHeight: true
Layout.fillWidth: true
Layout.minimumWidth: grid.width / 2 // constraint to the min width
Layout.minimumHeight: grid.height / 2 // constraint to the min height
Layout.rowSpan: 1
Layout.columnSpan: 1
}
Image{
id: im3
Layout.fillHeight: true
Layout.fillWidth: true
Layout.minimumWidth: grid.width / 2 // constraint to the min width
Layout.minimumHeight: grid.height / 2 // constraint to the min height
Layout.rowSpan: 1
Layout.columnSpan: 1
}
Image{
id: im4
Layout.fillHeight: true
Layout.fillWidth: true
Layout.minimumWidth: grid.width / 2 // constraint to the min width
Layout.minimumHeight: grid.height / 2 // constraint to the min height
Layout.rowSpan: 1
Layout.columnSpan: 1
}
}
}
}
}