Blackberry 10 Cascades，qml(C++和QT)中的布局出现问题

Having an issue with the layouts in Blackberry 10 Cascades, qml (C++ & QT)

本文关键字：布局 问题 QT Cascades qml C++ Blackberry      更新时间：2023-10-16

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

我想把后退按钮调到左边。标题在中间，添加按钮和活动指示器在右边（我希望活动指示器在最右边，但当它不显示时，我希望添加按钮在最右边）。

我不明白为什么这些物体都叠在一起（在同一个地方）。

在dock中，布局元素将相互重叠。很可能你的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
    }
}

只要删除顶级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
    }
}

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

例如，您的按钮需要类似以下内容：

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

相关文章：