c++ - 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

在停靠布局中，元素将相互重叠。您的 topBar 容器很可能只占用了容纳最大 child 所需的空间。尝试在 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
    }
}