右对齐 RowLayout 内的项目

Nmaster88

我想将 RowLayout 内的最后一项向右对齐,但即使 RowLayout 的宽度大于所有子项的宽度,该项目仍紧跟在其他项目之后。如果我使用anchors.right:parent.right它运行良好,但我收到警告。

ToolBar {
    height: globals.toolBar.height
    width:parent.width
background: Rectangle {
    anchors.fill: parent
    color:"white"
}

RowLayout {
    id: row
    anchors.fill: parent

    Button{
        Layout.alignment: Qt.AlignLeft
        contentItem: Image {
           source: "images/iconmenu.png"
         }
    }
    Button {
        Layout.alignment: Qt.AlignLeft
        contentItem: Image {
           source: "images/iconget.png"
        }
        ToolTip.text: qsTr("Get Data from Panel")
        ToolTip.visible: hovered
    }
    Button {
        id:buttonAbout
        Layout.alignment:Qt.AlignRight
        font.family: fontAwesomeSolid.font
        width:15
        height: 15
        text: "\uf129"
        ToolTip.text:qsTr("about")
        ToolTip.visible: hovered
        contentItem: Text {
            anchors.fill:buttonAbout
            anchors.right:buttonAbout.right
            anchors.topMargin: 3
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCente
            text: buttonAbout.text
        }
        background:
            Rectangle{
                width:20
                height: 20
                anchors.right: parent.right
                anchors.topMargin: 20
                radius:10
                border.width: 1
                border.color:"gray"
            }
        onClicked: popup.open()
    }
    Item {
        Layout.fillWidth: true
    }
}
}

| | 第 1 项| | 第 2 项 | | 第 3 项 | ------------------ |

我想要的是这个


| | 第 1 项| | 第 2 项 |------------------------| 第 3 项 ||

Nmaster88

似乎 Row 和 RowLayout 不允许这样存在空白空间。但它可以使用执行 fillwidth:true 的组件来解决

    Item{
        Layout.fillWidth: true
        height: buttonAbout.implicitHeight
        Button{
            id:buttonAbout
}
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将弹性项目右对齐?

来自分类Dev

在Flexbox中将项目向右对齐

来自分类Dev

右对齐弹性项目,无需额外的包装

来自分类Dev

将项目(使用':before')向右对齐

来自分类Dev

在flex容器中将项目右对齐

来自分类Dev

Android导航布局项目左右对齐

来自分类Dev

列表项目符号向右对齐

来自分类Dev

将标题内的跨度右对齐

来自分类Dev

在居中,与列对齐的flex容器中右对齐单个项目

来自分类Dev

在容器内将div靠左对齐并使其右对齐div

来自分类Dev

如何在弹性容器中将项目向右对齐?

来自分类Dev

具有左右对齐文本的离子项目

来自分类Dev

Bootstrap 4-将导航栏项目向右对齐

来自分类Dev

即使我做到了,CSS也不会将项目右对齐

来自分类Dev

如何在弹性容器中将项目向右对齐?

来自分类Dev

SWT中的RowLayout在字体基线上垂直对齐

来自分类Dev

在材料设计卡内将标题文本右对齐

来自分类Dev

将IMG右对齐到DIV元素内的边缘

来自分类Dev

li内的右对齐div应该填充高度

来自分类Dev

ap:column保持ap:panelGrid内的右对齐

来自分类Dev

如何将 ListView ItemTemplate 内的内容向右对齐?

来自分类Dev

在 flexbox 内对齐项目

来自分类Dev

左右对齐一个弹性项目,同时使其他弹性项目居中

来自分类Dev

CSS列表导航:将所有项目向左对齐,但将最后一个项目向右对齐

来自分类Dev

如何在<p>内右对齐<span>并使<p>内的文本居中?(HTML)

来自分类Dev

XML:如何将项目(HBox / Vbox的按钮)向右对齐

来自分类Dev

如何在AppKit上以自定义SwiftUI形式右对齐项目标签?

来自分类Dev

如何左右对齐HTML和CSS中的每个备用列表项以及项目符号

来自分类Dev

如何在 Vue.js 项目的导航栏中右对齐链接?

Related 相关文章

  1. 1

    如何将弹性项目右对齐?

  2. 2

    在Flexbox中将项目向右对齐

  3. 3

    右对齐弹性项目,无需额外的包装

  4. 4

    将项目(使用':before')向右对齐

  5. 5

    在flex容器中将项目右对齐

  6. 6

    Android导航布局项目左右对齐

  7. 7

    列表项目符号向右对齐

  8. 8

    将标题内的跨度右对齐

  9. 9

    在居中,与列对齐的flex容器中右对齐单个项目

  10. 10

    在容器内将div靠左对齐并使其右对齐div

  11. 11

    如何在弹性容器中将项目向右对齐?

  12. 12

    具有左右对齐文本的离子项目

  13. 13

    Bootstrap 4-将导航栏项目向右对齐

  14. 14

    即使我做到了,CSS也不会将项目右对齐

  15. 15

    如何在弹性容器中将项目向右对齐?

  16. 16

    SWT中的RowLayout在字体基线上垂直对齐

  17. 17

    在材料设计卡内将标题文本右对齐

  18. 18

    将IMG右对齐到DIV元素内的边缘

  19. 19

    li内的右对齐div应该填充高度

  20. 20

    ap:column保持ap:panelGrid内的右对齐

  21. 21

    如何将 ListView ItemTemplate 内的内容向右对齐?

  22. 22

    在 flexbox 内对齐项目

  23. 23

    左右对齐一个弹性项目,同时使其他弹性项目居中

  24. 24

    CSS列表导航:将所有项目向左对齐,但将最后一个项目向右对齐

  25. 25

    如何在<p>内右对齐<span>并使<p>内的文本居中?(HTML)

  26. 26

    XML:如何将项目(HBox / Vbox的按钮)向右对齐

  27. 27

    如何在AppKit上以自定义SwiftUI形式右对齐项目标签?

  28. 28

    如何左右对齐HTML和CSS中的每个备用列表项以及项目符号

  29. 29

    如何在 Vue.js 项目的导航栏中右对齐链接?

热门标签

归档