1

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

我试图让后退按钮位于左侧。标题位于中心，添加按钮和活动指示器位于右侧（我希望活动指示器位于最右侧，但当它未显示时 - 我希望添加按钮位于非常正确）。

我不知道为什么，这些对象都显示在彼此之上（在同一个位置）。

4

3 回答 3

1

在停靠布局中，元素会相互重叠。您的 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
    }
}
于 2013-07-07T20:06:36.903 回答
0

对您的代码一切都好，只需删除顶级 Container - 这里是一个过多的容器，并且没有任何布局。您的嵌入式元素存在于顶级容器内的默认配置布局中，因此，您将所有这些元素堆叠在一起。

因此，通过此修改，您的代码将如下所示

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
    }
}
于 2013-07-08T01:19:22.683 回答
-2

在 QML 中，锚点用于此目的。见：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

于 2013-07-05T22:36:25.153 回答