在Blackberry 10 Cascades中遇到佈局問題qml（C++＆QT）

Question

我在Blackberry 10 Cascades中遇到佈局問題。

我有一個QML文件，用下面的內容裏：

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 
     } 
    } 
} 

我試圖讓後退按鈕在左邊。標題位於中間，添加按鈕和活動指示符位於右側（我希望活動指示符位於右側，但未顯示時 - 我希望添加按鈕位於上方非常正確）。

我無法弄清楚爲什麼這些對象儘管在同一個地方都顯示在彼此之上。

Answer 1

在QML中，anchor用於此目的。參見：http://qt-project.org/doc/qt-4.8/qml-anchor-layout.html

例如您的Button需要如下所示：

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

您也可以使用Column，Row或Grid QML元素。 http://jryannel.wordpress.com/2010/02/19/rows-and-columns/ http://harmattan-dev.nokia.com/docs/library/html/qt4/qml-grid.html

Answer 2

在碼頭佈局元素將相互重疊。有可能你的topBar容器只佔用盡可能多的空間以適合最大的孩子。嘗試在topBar上設置Horizo​​ntalAlignment.Fill或設置minWidth。

您的後退按鈕和活動指示器也將相互重疊。我會將它們置於水平堆棧佈局中，以便活動指示符始終位於右側。

你最終的佈局可能是這樣的：

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

與您的代碼都好，只需去除頂層容器 - 它在這裏過多的一個，並且沒有任何的佈局。您嵌入的一個存在於頂級容器內的默認配置佈局內，因此，您將所有這些元素相互堆疊在一起。

所以，用這個修改你的代碼看起來像這樣

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 
    } 
}