QtQuick: изменить размер двух текстовых полей с Elide на обоих - PullRequest
Новая
       12

QtQuick: изменить размер двух текстовых полей с Elide на обоих

1 голос
/ 11 октября 2019

У меня есть две метки A и B в ряд, которые необходимо закрепить вместе, чтобы между ними не было промежутков. A не может быть больше, чем его содержимое, потому что B похоже на метку детализации. Было бы странно видеть Google Chrome_____(the current browser). Вы будете хотеть Google Chrome (the current browser)____ в этом случае. У обоих есть общий родитель, которого они могут заполнить. По содержанию и A, и B могут быть больше из двух. Все это должно быть выровнено так, чтобы A было привязано слева от родителя, а B.left == A.right.

Если места недостаточно, оба элемента должны сжиматься и вытесняться до тех пор, пока они не подойдут к родителю. Например, Google Chr..(The current br...

Эта последняя часть - то, что я не мог понять, как это сделать.

Я использую 2 ярлыка вместо 1, потому что они нуждаются в собственном выборе и своем стиле. ,Мое текущее решение будет просто elide B, а не уменьшать A вообще. 

RowLayout
        {
            spacing: 0
            anchors.left: parent.left
            anchors.right: customisedSettings.left
            anchors.leftMargin: UM.Theme.getSize("default_margin").width

            Label
            {
                id: textLabelA
                text: qualityName()
                font: UM.Theme.getFont("default")
                color: UM.Theme.getColor("text")
                Layout.margins: 0
                height: contentHeight
                verticalAlignment: Text.AlignVCenter
                renderType: Text.NativeRendering
                elide: Text.ElideRight

                function qualityName() {
                    [...]
                }
            }

            Label
            {
                id: textLabelDetail
                text: activeQualityDetailText()
                font: UM.Theme.getFont("default")
                color: UM.Theme.getColor("text_detail")
                anchors.verticalCenter: textLabelA.verticalCenter
                Layout.margins: 0
                Layout.fillWidth: true

                height: contentHeight
                verticalAlignment: Text.AlignVCenter
                renderType: Text.NativeRendering
                elide: Text.ElideRight

                function activeQualityDetailText()
                {
                    [..]
                }
            }
        }

1 Ответ

0 голосов
/ 11 октября 2019

Вы можете сделать это, поместив их в RowLayout и установив Layout.fillWidth: true на них обоих, чтобы они оба сократились. Чтобы убедиться, что первая метка не больше требуемого, установите Layout.maximumWidth: implicitWidth.

. Это дает нам: 

import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Window 2.3
import QtQuick.Layouts 1.2

Window {
    visible: true
    width: 600
    height: 400

    RowLayout {
        anchors.fill: parent
        Label {
            text: "Google Chrome"

            Layout.fillWidth: true
            Layout.maximumWidth: implicitWidth

            elide: Text.ElideRight
        }
        Label {
            text: "(the current browser)"
            color: "darkgray"

            Layout.fillWidth: true

            elide: Text.ElideRight
        }
    }
}
...