QML：如何在RowLayout中实现SubmitButton居中、BusyIndicator居其右侧并适配缩放？

问题1：SubmitButton水平居中，BusyIndicator置于其右侧 #

当前RowLayout会将按钮和指示器作为整体居中，不符合需求。可以通过嵌套容器+锚点布局实现目标：

修改后的RowLayout代码：

RowLayout{
    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    width: parent.width // 让布局占满父级宽度，确保内部容器可居中

    Item {
        Layout.alignment: Qt.AlignHCenter
        height: Math.max(searchTitleButton.height, biTitle.height)

        SubmitButton {
            id: searchTitleButton
            anchors.centerIn: parent // 按钮在容器内居中，容器整体在RowLayout中居中
            onClicked:{
                biTitle.running = true;
                recipeFetcher.searchByTitle(titleText.text);
            }
        }

        BusyIndicator{
            id: biTitle
            running: false
            anchors.left: searchTitleButton.right // 绑定到按钮右侧
            anchors.verticalCenter: searchTitleButton.verticalCenter // 垂直居中对齐按钮
        }
    }
}

原理：用Item作为中间容器，让容器在RowLayout中水平居中，再通过锚点让SubmitButton在容器内居中，BusyIndicator紧贴按钮右侧并垂直对齐，这样按钮始终保持整体水平居中，指示器固定在其右侧。

问题2：缩放后元素位置错乱 #

使用scale属性会导致视觉大小和布局计算尺寸不一致（布局系统仍基于元素原始尺寸计算位置），从而引发错位。解决方案是直接调整元素的实际尺寸，而非仅视觉缩放：

修改SubmitButton代码： #

RoundButton {
    // 替换scale为基于根尺寸的实际宽高
    Layout.preferredWidth: 100 * Math.min(root.width * 0.002, root.height * 0.002)
    Layout.preferredHeight: 40 * Math.min(root.width * 0.002, root.height * 0.002)
    Layout.alignment: Qt.AlignCenter

    contentItem: Text {
        text: "Submit"
        color: hovered ? "darkred" : "black"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
        // 同步缩放字体大小
        font.pixelSize: 16 * Math.min(root.width * 0.002, root.height * 0.002)
    }

    background: Rectangle {
        opacity: 1
        border.color: "orange"
        radius: parent.height / 2 // 保持圆形按钮的圆角比例
        color: "orange"

        layer.enabled: parent.hovered

        layer.effect: DropShadow {
            transparentBorder: true
            color: "orange"
            samples: 40
        }
    }
}

修改BusyIndicator代码： #

BusyIndicator{
    id: biTitle
    running: false
    anchors.left: searchTitleButton.right
    anchors.verticalCenter: searchTitleButton.verticalCenter
    // 替换scale为实际尺寸
    Layout.preferredWidth: 30 * Math.min(root.width * 0.002, root.height * 0.002)
    Layout.preferredHeight: 30 * Math.min(root.width * 0.002, root.height * 0.002)
}

原理：通过Layout.preferredWidth/Layout.preferredHeight直接设置元素的实际布局尺寸，同时同步调整内部文本的字体大小，让布局系统基于缩放后的真实尺寸计算位置，彻底解决错位问题。

内容的提问来源于stack exchange，提问作者Michael21