QML adapter à l'écran sur toutes les résolutions
Salut à tous j'ai un problème avec mon code QML.
J'ai fait une erreur et je suis allée mettre certaine taille pour les éléments et maintenant j'ai un problème lors de la mise en application sur d'autres dispositifs.
Je vais coller mon code où j'ai de la largeur et de la hauteur de sorte que vous pouvez le changer pour me montrer comment travailler avec les dynamiques resizeing.
Je dois dire que je suis d'appel qml fichier à partir de l'intervalle qt avec ce code:
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();
Et voici mon code 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
}
]
}
J'ai mis tout le code avec la largeur et la hauteur de sorte que vous pouvez voir ce que j'ai fait de mal. Et s'il vous plaît si quelqu'un peut me dire comment le faire remplir dynamiquement.
OriginalL'auteur user123_456 | 2012-03-03
Vous devez vous connecter pour publier un commentaire.
Il est malheureusement difficile d'obtenir un parfait, car il est probable que la taille de l'écran se rétrécit que vous pourriez réellement voulez que les boutons sont plus gros et de déposer le contenu de l'écran de sorte que l'utilisateur peut accéder et lire tout est ok.
Mais l'approche générale consiste à définir un facteur d'échelle dans le C++ côté:
Puis sur le QML côté, l'utilisation que tout le monde à l'échelle de tous les objets:
De cette façon, vous pouvez ajuster l'échelle variable pour tout changer de taille. Ceci dit, beaucoup de gens se retrouvent avec différents fichiers QML en fonction de la taille de la plate-forme.
Généralement, il faudrait impliquer #ifdefs pour déterminer quel type d'appareil il est. Par exemple, si c'est un petit appareil, puis vous allez définir le facteur d'échelle pour une petite valeur, etc. J'ai eu l'intention d'écrire un article de blog sur ce que j'ai utilisé pour la cueillette entre Qt Widgets vs QML. Ce serait travailler pour vous aussi... je vais essayer de faire ça cette semaine et de poster un lien de retour ici.
un grand merci à vous
Au lieu de faire tellement de choses, vous pouvez simplement changer d'échelle de la propriété de la société mère qml fichier directement, donc mise à l'échelle de tous les autres enfants de qml automatiquement les fichiers. ( En supposant que la toile est en train de changer dans les mêmes proportions de la largeur et de la hauteur )
OriginalL'auteur Wes Hardaker
Je vous recommande de lire le L'évolutivité page dans le courant de l'intervalle Qt (4.8) documentation: il est exactement sur ce sujet.
Il recommande ces techniques (je cite la page ici), et fournit beaucoup plus de détails.
Créer des haut-niveau de la mise en page des définitions pour chaque facteur de forme.
Garder les mises en page des petites et laissez-les composants de l'échelle, par rapport à leur
parent immédiat.
Permettent de définir des mesures indépendantes, telles que dp (appareil
indépendant pixels), et d'utiliser ces derniers à des composants de taille et de disposition
de la mesure.
Définir des mises en page de manière proportionnelle à l'aide de l'intégré dans le schéma de
caractéristiques de QML.
Mise à jour 2014-11-18 Cette vidéo et l'article a l'air très utile, en effet:
Prise en charge de Plusieurs Tailles d'Écran & Écran, les Densités de Qt et V-Play
Mise à jour 2017-01-24 Il y a un mise à jour de Qt version 5.8 de l'Évolutivité de la page mentionnée ci-dessus.
OriginalL'auteur Clare Macrae
Modification de l'appareil, vous êtes en train de changer l'écran densité de pixels. Si vous avez un appareil avec une faible qualité de l'affichage, il aura moins de nombre de pixels par pouce ou en pixels par centimètre qu'un appareil avec un écran de haute qualité.
La compréhension de ce que nous pouvons facilement concevoir une méthode à l'échelle de notre contenu en fonction de la densité de pixels. Par exemple dans mon cas j'ai un ordinateur portable sur lequel j'utilise Qt creator. Il a densité de pixel de 4. Mais mon téléphone android est de haute qualité qui a la densité de 16(4 fois plus que mon Portable). Cela signifie que si un élément a une largeur " X "et de hauteur" Y " lors de l'affichage sur mon Portable, sur mon téléphone, il va apparaître avec une largeur de 'X'/4 et la hauteur de " Y " /4 . Ainsi, j'ai à l'échelle de hauteur et de largeur par 4.
Maintenant, Comment le mettre en œuvre? Dans QML, nous avons une propriété "pixelDensity" en vertu de l'objet à l'Écran qui vous donnera la densité de pixels de l'écran où vous exécutez votre application. En divisant ce chiffre par la densité de l'écran de l'écran où vous avez testé votre application vous donnera le facteur d'échelle. Alors maintenant, vous n'avez pas besoin de s'inquiéter au sujet d'autres appareils que vous venez de trouver la densité de pixels de l'écran sur lequel vous travaillez actuellement.
Code suivant fonctionne parfaitement pour moi.
default_pix_density
devrait être149 ppi pixel density
que de les specs?vous pouvez trouver la densité de l'écran par Écran.pixelDensity'. Cette méthode n'est utile que lorsque l'appareil que vous utilisez pour le développement/tests différents densité de pixels de l'appareil sur lequel vous souhaitez déployer votre application. 'default_pix_density' est la densité de pixels de votre périphérique sur lequel vous test/développement.
OriginalL'auteur Farhan Haider