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

在停靠布局中，元素将相互重叠。有可能你的topBar容器只占用最大的孩子所需的空间。尝试在topBar上设置HorizontalAlignment.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 2

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

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

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

Answer 3

在QML锚中用于此目的。请参阅：http://qt-project.org/doc/qt-4.8/qml-anchor-layout.html

e.g。你的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

在Blackberry 10 Cascades中存在布局问题，qml（C ++和QT）

3 个答案: