Question

以下布局有效。我将其显示为参考。 startSelectionRect总是按照我的意图固定在行的左侧。

Rectangle {
    id: startLine
    x: ui.selectionModel.startPixel
    width: 1
    height: parent.height
    color: QQProperties.Colors.text
}

Rectangle {
    id: startSelectionRect
    color: QQProperties.Colors.transparentSelectionBackground
    anchors.top: parent.top
    anchors.right: startLine.left
    implicitHeight: startSelectionLayout.implicitHeight + QQProperties.Margins.small * 2
    implicitWidth: startSelectionLayout.implicitWidth + QQProperties.Margins.medium * 2

    ColumnLayout {
        id: startSelectionLayout
        spacing: QQProperties.Margins.small
        anchors.topMargin: QQProperties.Margins.small
        anchors.bottomMargin: QQProperties.Margins.small
        anchors.leftMargin: QQProperties.Margins.medium
        anchors.rightMargin: QQProperties.Margins.medium
        anchors.fill: parent

        QQComponents.HeaderText {
            id: startText
            text: Converter.formatDuration(ui.selectionModel.startUs, Converter.MicroSeconds, Converter.MicroSeconds)
        }
    }
}

在这里，我尝试根据条件将startSelectionRect锚定到行的右侧或左侧。

function selectionFromLowestBound() {
    console.log("selectionStartingOnLowestBound: ", ui.selectionModel.startPixel === ui.selectionModel.lowerBoundaryPixel);
    return ui.selectionModel.startPixel === ui.selectionModel.lowerBoundaryPixel;
}

Rectangle {
    id: startLine
    x: ui.selectionModel.startPixel
    width: 1
    height: parent.height
    color: QQProperties.Colors.text
}

Rectangle {
    id: startSelectionRect
    color: QQProperties.Colors.transparentSelectionBackground
    anchors.top: parent.top
    anchors.right: selectionFromLowestBound() ? startLine.left : undefined
    anchors.left: !selectionFromLowestBound() ? startLine.right : undefined
    implicitHeight: startSelectionLayout.implicitHeight + QQProperties.Margins.small * 2
    implicitWidth: startSelectionLayout.implicitWidth + QQProperties.Margins.medium * 2

    ColumnLayout {
        id: startSelectionLayout
        spacing: QQProperties.Margins.small
        anchors.topMargin: QQProperties.Margins.small
        anchors.bottomMargin: QQProperties.Margins.small
        anchors.leftMargin: QQProperties.Margins.medium
        anchors.rightMargin: QQProperties.Margins.medium
        anchors.fill: parent

        QQComponents.HeaderText {
            id: startText
            text: Converter.formatDuration(ui.selectionModel.startUs, Converter.MicroSeconds, Converter.MicroSeconds)
        }
    }
}

我可以用console.log看到条件被评估，有时是true，有时是false。但是startSelectionRect始终锚定在该行的右侧。并且startSelectionRect失去了背景色。

我在做什么错了？

编辑：

在这里，我试图遵循Amfasis的回答，但到目前为止却失败了。

function selectionFromLowestBound() {
    return ui.selectionModel.startPixel === ui.selectionModel.lowerBoundaryPixel;
}

Rectangle {
    id: startLine
    x: ui.selectionModel.startPixel
    width: 1
    height: parent.height
    color: QQProperties.Colors.text
}

Rectangle {
    id: startSelectionRect
    color: QQProperties.Colors.transparentSelectionBackground
    anchors.top: parent.top
    implicitHeight: startSelectionLayout.implicitHeight + QQProperties.Margins.small * 2
    implicitWidth: startSelectionLayout.implicitWidth + QQProperties.Margins.medium * 2

    states: [
        State {
            name: "lowerBound"
            when: selectionFromLowestBound()
            PropertyChanges {
                target: startSelectionRect
                anchors.right: startLine.left
            }
        },
        State {
            name: "upperBound"
            when: !selectionFromLowestBound()
            PropertyChanges {
                target: startSelectionRect
                anchors.left: startLine.right
            }
        } 
    ]

    ColumnLayout {
        id: startSelectionLayout
        spacing: QQProperties.Margins.small
        anchors.topMargin: QQProperties.Margins.small
        anchors.bottomMargin: QQProperties.Margins.small
        anchors.leftMargin: QQProperties.Margins.medium
        anchors.rightMargin: QQProperties.Margins.medium
        anchors.fill: parent

        QQComponents.HeaderText {
            id: startText
            text: Converter.formatDuration(ui.selectionModel.startUs, Converter.MicroSeconds, Converter.MicroSeconds)
        }
    }
}

Answer 1

您可以将状态添加到QML项中，也可以在其中设置不同的锚点。请参见以下示例：

gcloud compute target-https-proxies create [NAME] \
    --url-map=[URL_MAP] \
    --ssl-certificates=[SSL_CERTIFICATE1][,[SSL_CERTIFICATE2],[SSL_CERTIFICATE3],...]

如何根据条件更改项目的锚点以将其附加到另一个项目的右侧或左侧？

1 个答案: