大家好，我的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
}
]
}
我已经将所有代码放在宽度和高度上，这样你就可以看到我做错了什么 . 如果有人可以说我如何让它动态填充，请 .
3 回答
令人遗憾的是，完美无瑕，因为随着屏幕尺寸缩小，您可能实际上希望按钮更大并从屏幕上删除内容以确保用户可以访问和读取所有内容 .
但一般方法实际上是在C侧设置比例因子：
然后在QML方面，使用每个人来扩展所有对象：
这样你就可以调整scale变量来改变一切的大小 . 话虽如此，许多人最终会根据平台大小得到不同的QML文件 .
我建议你阅读当前Qt（4.8）文档中的Scalability页面：它正是这个主题 .
它推荐这些技术（我在这里引用页面），然后提供更多细节 .
为每个外形规格创建单独的顶级布局定义 .
保持布局较小，让组件相对于其直接父级进行缩放 .
定义与设备无关的测量，例如dp（设备无关像素），并使用这些测量来缩放组件和进行布局测量 .
使用QML的内置布局功能以比例方式定义布局 .
Update 2014-11-18 这篇和视频文章看起来非常有用：Supporting Multiple Screen Sizes & Screen Densities with Qt and V-Play
Update 2017-01-24 上面提到了一个updated Qt 5.8 version的Scalability页面 .
更改设备，实际上是在改变屏幕像素密度 . 如果您的设备具有低质量显示器，则其具有比具有高质量显示器的设备更低的每英寸像素数或每厘米像素数 .
理解这一点，我们可以很容易地设计一种方法来根据像素密度来扩展我们的内容 . 例如，在我的情况下，我有一台笔记本电脑，我使用Qt创建者 . 它的像素密度为4.但我的Android手机质量很高，密度为16（比我的笔记本电脑多4倍） . 这意味着如果在我的笔记本电脑上显示某个项目的宽度为“X”且高度为“Y”，则在我的手机上它将显示宽度为“X”/ 4且高度为“Y”/ 4 . 因此，我必须将高度和宽度缩放4 .
现在，如何实现这个？在QML中，我们在对象屏幕下有一个属性“pixelDensity”，它将为您提供运行应用程序的屏幕的像素密度 . 将此值除以您测试应用程序的屏幕密度，将为您提供比例因子 . 因此，现在您不必担心其他设备，您只需找到当前正在处理的屏幕像素密度 .
以下代码适合我 .