根据按钮大小缩放 Qml 按钮文本答案

【问题标题】：Scale Qml button text depending on button size根据按钮大小缩放 Qml 按钮文本
【发布时间】：2022-10-17 16:49:43
【问题描述】：

我想根据按钮的高度缩放按钮的文本：

import QtQuick 2.11
import QtQuick.Controls 2.10

ToolButton {
    id: btn
    font.pixelSize: implicitHeight*0.8 // Binding loop detected for property "font.pixelSize"
    
    contentItem: Text {
        text: btn.text
        font: btn.font
    }
}

这有时有效，但更常见的是检测到绑定循环，因为当字体大小发生变化时，按钮大小也会发生变化。缩放文本大小的正确方法是什么？

问候，

【问题讨论】：

标签： qt qml qtquick2 qt6 qtquickcontrols2

【解决方案1】：

使用“高度”而不是“隐式高度”。

而且ToolButton的高度默认是和字体大小绑定的，所以你需要为你的按钮设置一个高度。

【讨论】：

使用height 具有相同的结果。
您是否将 ToolButton 的“height”属性设置为某个值？因为我刚刚测试了这个并且它有效！
我明白你的意思，但我需要反过来。例如，当按钮放置在布局中（或其他调整大小的容器）并且其大小发生更改时，我也想调整按钮的文本大小。当按钮调整大小时，我没有看到按钮文本大小发生变化 - 我必须手动调整字体大小。
好吧，这是一个特例，因为 Layout 有很多附加的属性，并且操作它的子项。如果您向我提供您正在使用的 Layout 项目的可重现代码，我可能会为您提供帮助。

【解决方案2】：

避免绑定循环的一种方法是不使用声明性代码，而是使用命令式代码。为此，我们观察onWidthChanged 和onHeightChanged 并调用resize()。在我们的调整大小例程中，我们使用固定的TextMetric 以参考字体大小计算比例。这样我们就可以相应地调整文本大小：

import QtQuick 2.15
import QtQuick.Controls 2.15

Page {
    anchors.fill: parent

    ToolButton {
        id: btn
        anchors.centerIn: parent
        width: parent.width / 2
        height: parent.height / 2
        text: qsTr("Hello")
        property TextMetrics tm: TextMetrics {
            font.pixelSize: 20
            text: btn.text
        }
        onWidthChanged: Qt.callLater(resize)
        onHeightChanged: Qt.callLater(resize)
        function resize() {
            let fx = width / tm.width * tm.font.pixelSize * 0.8;
            let fy = height / tm.height * tm.font.pixelSize * 0.8;
            font.pixelSize = Math.min(fx, fy)
        }
    }
}

你可以Try it Online!

【讨论】：