Blackberry 10 Cascades、qml (C++ & QT) 中的布局存在问题

Posted 2023-02-16

【中文标题】Blackberry 10 Cascades、qml (C++ & QT) 中的布局存在问题

【英文标题】：Having an issue with the layouts in Blackberry 10 Cascades, qml (C++ & QT)

【发布时间】：2013-07-05 21:33:34

【问题描述】：

我遇到了 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
        
    

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

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

【参考方案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
    

【参考方案2】：

您的代码一切正常，只需删除*** 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
    

【参考方案3】：

在 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

【讨论】：

BB10平台/Cascades框架上没有这样的属性/元素