大家好我的QML代码都有问题。 我犯了错误，我把一定的大小放到了元素上，现在我把app放到其他设备上时遇到了问题。 我会将我的代码粘贴到我有宽度和高度的位置，以便您可以更改它以向我展示如何使用动态调整大小。
我需要说我使用以下代码从qt调用qml文件：
QDeclarativeView *view= new QDeclarativeView;
ui->setupUi(this);
setCentralWidget(view);
QDeclarativeContext *ctxt = view->rootContext();
ctxt->setContextProperty("funkcije",this);
ctxt->setContextProperty("myModel", QVariant::fromValue(MainWindow::dataList));
view->setSource(QUrl("qrc:/gui.qml"));
view->setResizeMode(QDeclarativeView::SizeRootObjectToView);
showFullScreen();
这是我的QML代码：
Rectangle {
id:window
width: 602
height: 1000
anchors.fill: parent
radius: 0
.....
ListView {
id: listview1
x: 0
y: 219
// width: 574
// height: 967
width: window.width
height: window.height
visible: true
keyNavigationWraps: false
boundsBehavior: Flickable.DragAndOvershootBounds
opacity: 1
maximumFlickVelocity: 2500
anchors.leftMargin: 0
highlightMoveSpeed: 489
contentWidth: 0
preferredHighlightEnd: 2
spacing: 5
highlightRangeMode: ListView.NoHighlightRange
snapMode: ListView.SnapToItem
anchors.bottomMargin: 0
anchors.rightMargin: 0
anchors.topMargin: 219
anchors.fill: parent
model: myModel
delegate:Component {
//id: contactDelegate
Item {
id:it;
property variant myData: model
width: 574; height: 220
Column {
id:col
x: 12
y: 0
width: 561
height: 164
smooth: true
anchors.rightMargin: 0
anchors.bottomMargin: 7
anchors.leftMargin: 13
anchors.topMargin: 7
anchors.fill: parent
spacing: 15
......
highlight: Rectangle
{
width: 600
height: 222
color:"black"; radius: 5; opacity: 0.7
focus: true
}
}
Rectangle {
id: rectangle1
x: 0
y: 0
width: 602
height: 219
......
//dodaj korisnika
Flipable {
id: flipable
x: 6
y: 32
width: 173
height: 179
.......
MouseArea {
x: 10
y: 9
width: 146
height: 150
anchors.rightMargin: 7
anchors.leftMargin: 10
anchors.topMargin: 9
anchors.bottomMargin: 9
hoverEnabled: false
anchors.fill: parent
........
//Brisanje korisnika
Flipable {
id: flipable1
x: 408
y: 32
width: 175
height: 179
.......
MouseArea {
x: 7
y: 9
width: 153
height: 151
anchors.rightMargin: 8
anchors.leftMargin: 7
anchors.topMargin: 9
anchors.bottomMargin: 8
hoverEnabled: false
anchors.fill: parent
.......
//promjeni korisnika
Flipable {
id: flipable2
x: 208
y: 32
width: 176
height: 179
.......
MouseArea {
x: 7
y: 9
width: 73
height: 76
anchors.rightMargin: 7
anchors.leftMargin: 7
anchors.topMargin: 9
anchors.bottomMargin: 9
hoverEnabled: false
anchors.fill: parent
.......
Text {
id: text1
x: 200
y: 212
font.pixelSize: 12
opacity: 0
}
Rectangle {
id: rectangle2
x: 259
y: 510
width: 200
height: 200
color: "#ffffff"
opacity: 0
}
TextInput {
id: text_input1
x: 331
y: 233
width: 80
height: 20
font.pixelSize: 12
opacity: 0
}
Text {
id: text2
x: 136
y: 228
font.pixelSize: 12
opacity: 0
}
Text {
id: text3
x: 152
y: 314
font.pixelSize: 12
opacity: 0
}
Rectangle {
id: rectangle3
x: 256
y: 293
width: 200
height: 200
color: "#ffffff"
opacity: 0
}
Rectangle {
id: rectangle4
x: 339
y: 787
width: 200
height: 200
color: "#ffffff"
opacity: 0
}
Rectangle {
id: rectangle5
x: 270
y: 456
width: 200
height: 200
color: "#ffffff"
opacity: 0
}
TextInput {
id: text_input2
x: 269
y: 316
width: 80
height: 20
font.pixelSize: 12
opacity: 0
}
TextInput {
id: text_input3
x: 269
y: 401
width: 80
height: 20
font.pixelSize: 12
opacity: 0
}
TextInput {
id: text_input4
x: 269
y: 495
width: 80
height: 20
font.pixelSize: 12
opacity: 0
}
TextInput {
id: text_input5
x: 143
y: 465
width: 80
height: 20
text: qsTr("text")
font.pixelSize: 12
opacity: 0
}
states: [
State {
name: "State1"
PropertyChanges {
target: listview1
x: 0
y: 1049
width: 574
height: 967
visible: false
anchors.topMargin: 1049
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.leftMargin: 0
}
PropertyChanges {
target: rectangle1
x: 0
y: 0
width: 602
height: 253
visible: true
}
PropertyChanges {
target: text1
x: 187
y: 253
width: 247
height: 71
color: "#c48d17"
text: qsTr("Unesite novog korisnika")
styleColor: "#e61717"
style: "Raised"
font.pixelSize: 31
font.family: "Lucida Handwriting"
verticalAlignment: "AlignVCenter"
horizontalAlignment: "AlignHCenter"
opacity: 1
}
PropertyChanges {
target: rectangle2
x: 251
y: 353
width: 258
height: 42
color: "#777e79"
radius: 15
smooth: true
opacity: 1
}
PropertyChanges {
target: text_input1
x: 251
y: 360
width: 258
height: 29
font.pixelSize: 17
font.family: "Lucida Handwriting"
horizontalAlignment: "AlignHCenter"
opacity: 1
}
PropertyChanges {
target: text2
x: 127
y: 362
width: 101
height: 25
color: "#fd0606"
text: qsTr("Ime")
style: "Raised"
font.family: "Lucida Handwriting"
font.pixelSize: 22
verticalAlignment: "AlignVCenter"
horizontalAlignment: "AlignHCenter"
opacity: 1
}
PropertyChanges {
target: text3
x: 119
y: 519
color: "#f70606"
text: qsTr("Prezime")
style: "Raised"
font.pixelSize: 20
font.family: "Lucida Handwriting"
verticalAlignment: "AlignVCenter"
horizontalAlignment: "AlignHCenter"
opacity: 1
}
PropertyChanges {
target: rectangle3
x: 251
y: 514
width: 258
height: 40
color: "#777e79"
radius: 15
opacity: 1
}
PropertyChanges {
target: rectangle4
x: 251
y: 669
width: 258
height: 38
color: "#777e79"
radius: 15
opacity: 1
}
PropertyChanges {
target: rectangle5
x: 251
y: 823
width: 258
height: 36
color: "#777e79"
radius: 15
opacity: 1
}
PropertyChanges {
target: text_input2
x: 251
y: 519
width: 258
height: 29
font.family: "Lucida Handwriting"
font.pixelSize: 17
horizontalAlignment: "AlignHCenter"
opacity: 1
}
PropertyChanges {
target: text_input3
x: 251
y: 674
width: 258
height: 29
horizontalAlignment: "AlignHCenter"
font.pixelSize: 17
font.family: "Lucida Handwriting"
opacity: 1
}
PropertyChanges {
target: text_input4
x: 251
y: 827
width: 258
height: 29
font.family: "Lucida Handwriting"
font.pixelSize: 17
horizontalAlignment: "AlignHCenter"
opacity: 1
}
PropertyChanges {
target: text4
x: 127
y: 669
width: 85
height: 31
color: "#f70606"
text: qsTr("Broj")
style: "Raised"
font.family: "Lucida Handwriting"
font.pixelSize: 20
horizontalAlignment: "AlignHCenter"
verticalAlignment: "AlignVCenter"
opacity: 1
}
]
}
我已经将所有代码放在宽度和高度上，这样你就可以看到我做错了什么。如果有人可以告诉我如何让它动态填充，请。
答案 0 :(得分：13)
不幸的是，很难获得完美，因为随着屏幕尺寸缩小，您可能实际上希望按钮更大并从屏幕上删除内容以确保用户可以访问和一切都好。
但一般的方法实际上是在C ++方面设置比例因子：
ctxt->setContextProperty("scale", /* put calculated scale factor here */);
然后在QML方面，使用每个人来扩展所有对象：
Rectangle {
id:window
width: 602 * scale
height: 1000 * scale
这样你可以调整比例变量来改变一切的大小。话虽如此，但很多人最终会得到不同的QML文件，具体取决于平台大小。
答案 1 :(得分：11)
我建议您阅读当前Qt（4.8）文档中的Scalability页面：它就是这个主题。
它推荐这些技术（我在这里引用页面），然后提供更多细节。
为每个外形规格创建单独的顶级布局定义。
保持布局较小，让组件相对于它们进行缩放 直接父母。
定义与设备无关的测量，例如dp（设备 独立像素），并使用它们来缩放组件和布局 测量
使用内置布局以比例方式定义布局 QML的特点。
更新2014-11-18 这篇和视频文章确实非常有用： Supporting Multiple Screen Sizes & Screen Densities with Qt and V-Play
更新2017-01-24 上面提到的可扩展性页面有updated Qt 5.8 version。
答案 2 :(得分：1)
更改设备，实际上是在改变屏幕像素密度。如果您的显示器质量较低，则每英寸像素数或每厘米像素数低于具有高质量显示器的设备。
了解这一点，我们可以轻松地设计一种方法来根据像素密度来缩放我们的内容。例如，在我的情况下，我有一台笔记本电脑，我使用Qt创建者。它的像素密度为4.但我的Android手机质量很高，密度为16（比我的笔记本电脑多4倍）。这意味着如果某个商品的宽度为“X＆＃39;和身高＆＃39; Y＆＃39;在我的笔记本电脑上显示时，在我的手机上显示的宽度为“X＆＃39; / 4”和“＆＃39; Y＆＃39; / 4”。因此，我必须将高度和宽度缩放4。
现在，如何实现这个？在QML中，我们有一个属性＆＃34; pixelDensity＆＃34;在对象屏幕下，它将为您提供运行应用程序的屏幕的像素密度。将此值除以您测试应用程序的屏幕密度，将为您提供比例因子。因此，现在您不必担心其他设备，您只需找到目前正在处理的屏幕像素密度。
以下代码对我来说非常适合。
for col in df:
df[col] = df[col].astype(int)