不使用布局的QML基线对齐-解网

问：

我想在不使用任何花哨的 RowLayouts 等的情况下使用基线对齐锚点。我想使用标签的底部锚点，以文本编辑的基线为锚点。我认为，没有文本的控件的基线是顶部锚点，而对于带有文本的控件，则介于顶部和底部锚点之间。但对于我的TextEdit来说，它是顶部锚点，这是出乎意料的

        Rectangle {
            width: 320
            height: 100
            border.width:  1

            Label {
                id: l
                text: "Description "
                height: 40
                anchors.bottom: te1.baseline
            }
            TextField {
                id: te1
                text: "Some test"
                height: 35
                anchors.left: l.right
                y: parent.height /  2
            }
        }

我尝试了Qt5&6以及默认控件和QtQuick.Controls的演示。出于某种原因，文本编辑的基线是顶部。为什么？

更新：我放在实际屏幕截图下方的所需结果。我尝试使用控件的大小和字体的指标手动计算标签的偏移量。可悲的是，我在那里仍然有魔术常数，这在各种机器之间是无法移植的

FontMetrics {
    id: fontMetrics
    font.family: "Arial"
    font.pointSize: defaultFontSize
}

Rectangle {
    width: 320
    height: 120
    border.width:  1
    Text {
        id: l3
        text: "Description:"
        height: 15
        width: 150
        x: 0
        y: te3.y + te3.height / 2 - fontMetrics.height / 2 - 4
        font.family: "Arial";
        font.pointSize: defaultFontSize
    }
    TextField {
        id: te3
        text: "asdf2222"
        font.family: "Arial"
        font.pointSize: defaultFontSize
        background: Rectangle { color: "lightgray" }
        height: 50
        width: 100
        y: parent.height /  2
        anchors.left: l3.right
    }
}

QML 对齐 qtquickcontrols2 基线

Rectangle {
  width: 320
  height: 200
  border.width:  1
  color: "black"
  Label {
    id: l
    height: 40
    text: "Description: "
    anchors.baseline: te1.baseline
    // y: te1.y
  }
  TextField {
    id: te1
    height: 35
    text: "Some test"
    anchors.left: l.right
    y: parent.height /  2
  }
}

上一个：最大公共前景像素的图像平移优化算法

下一个：在 Overleaf 的 lstlisting 环境中右对齐

不使用布局的QML基线对齐

QML baseline alignment without using a layout

评论