Avoir un problème avec les mises en page dans Blackberry 10 Cascades, qml (C++ & QT)

Question

J'ai un problème avec les mises en page dans Blackberry 10 Cascades.

Je dispose d'un fichier QML, avec le contenu suivant à l'intérieur:

content: Container { 
    Container { 
     id: topBar 
     objectName: "topBar" 
     layout: DockLayout {} 
     ImageButton { 
      id: back 
      objectName: "back" 
      defaultImageSource: "asset:///images/back.png" 
      onClicked: app.goBack() 
      minHeight: 100 
      minWidth: 100 
      maxHeight: 100 
      maxWidth: 100 
      horizontalAlignment: HorizontalAlignment.Left 
     } 
     Label { 
      id: heading 
      objectName: "heading" 
      textStyle { fontSize: FontSize.Large } 
      horizontalAlignment: HorizontalAlignment.Center 
     } 
     ImageButton { 
      id: add 
      objectName: "add" 
      defaultImageSource: "asset:///images/add.png" 
      onClicked: app.add() 
      minHeight: 100 
      minWidth: 100 
      maxHeight: 100 
      maxWidth: 100 
      horizontalAlignment: HorizontalAlignment.Right 
     } 
     ActivityIndicator { 
      id: activityIndicator 
      objectName: "activityIndicator" 
      minHeight: 100 
      minWidth: 100 
      maxHeight: 100 
      maxWidth: 100 
      horizontalAlignment: HorizontalAlignment.Right 
     } 
    } 
} 

Je suis en train d'obtenir le bouton de retour pour être à gauche. L'en-tête doit être au centre, et le bouton d'ajout et l'indicateur d'activité doivent être sur la droite (je veux que l'indicateur d'activité soit sur la droite, mais quand il n'apparaît pas - je veux que le bouton d'ajout soit sur très vrai).

Je n'arrive pas à comprendre pourquoi ces objets apparaissent tous les uns au-dessus des autres (au même endroit).

Answer 1

Dans QML ancres sont utilisés à cette fin. Voir: http://qt-project.org/doc/qt-4.8/qml-anchor-layout.html

par exemple. votre bouton a besoin de quelque chose comme:

anchors.left: parent.left 
anchors.leftMargin: 10 

Vous pouvez également utiliser un élément QML colonne, ligne ou grille. http://jryannel.wordpress.com/2010/02/19/rows-and-columns/ http://harmattan-dev.nokia.com/docs/library/html/qt4/qml-grid.html

Answer 2

Dans une présentation de quai, les éléments se chevauchent. Les chances sont que votre conteneur topBar ne prenne que l'espace nécessaire pour s'adapter au plus grand enfant. Essayez soit de définir HorizontalAlignment.Fill sur le topBar ou définir une minWidth.

Votre bouton de retour et votre indicateur d'activité se chevaucheront également. Je les mettrais dans une disposition de pile horizontale de sorte que l'indicateur d'activité soit toujours sur la droite.

Votre mise en page finale pourrait ressembler à ceci:

Container { 
    id: toppbar 
    docklayout 
    minWidth: 600 
    ImageButton { 
     id: back 
     horizontalAlignment left 
    } 
    Label { 
     id: heading 
     horizontalAlignment center 
    } 
    Container { 
     horizontalAlignment right 
     stacklayout leftToRight 
     addButton 
     activity indicator 
    } 
} 

Answer 3

Tout bien avec votre code, il suffit de retirer le conteneur de niveau supérieur - c'est une question trop ici, et ne pas la mise en page. Votre système intégré existe à l'intérieur de la configuration configurée par défaut dans le conteneur de niveau supérieur, ce qui signifie que tous ces éléments sont empilés les uns sur les autres.

Ainsi, avec cette modification votre code ressemblera à ceci

content: Container { 
    id: topBar 
    objectName: "topBar" 
    layout: DockLayout { 
    } 
    ImageButton { 
     id: back 
     objectName: "back" 
     defaultImageSource: "asset:///images/back.png" 
     onClicked: app.goBack() 
     minHeight: 100 
     minWidth: 100 
     maxHeight: 100 
     maxWidth: 100 
     horizontalAlignment: HorizontalAlignment.Left 
    } 
    Label { 
     id: heading 
     objectName: "heading" 
     textStyle { 
      fontSize: FontSize.Large 
     } 
     horizontalAlignment: HorizontalAlignment.Center 
    } 
    ImageButton { 
     id: add 
     objectName: "add" 
     defaultImageSource: "asset:///images/add.png" 
     onClicked: app.add() 
     minHeight: 100 
     minWidth: 100 
     maxHeight: 100 
     maxWidth: 100 
     horizontalAlignment: HorizontalAlignment.Right 
    } 
    ActivityIndicator { 
     id: activityIndicator 
     objectName: "activityIndicator" 
     minHeight: 100 
     minWidth: 100 
     maxHeight: 100 
     maxWidth: 100 
     horizontalAlignment: HorizontalAlignment.Right 
    } 
}