在 qml 中自动调整文本大小答案

【问题标题】：autoresize text in qml在 qml 中自动调整文本大小
【发布时间】：2017-06-05 07:46:31
【问题描述】：

在学习QML和QtQuick的过程中，出现了如下问题。如何通过减小文本所在的元素使文本自动减小字体大小。现在我有了这个方法

Rectangle {
id: main_window
width: 700
height: 500

property int main_w: main_window.width

Rectangle {
    width: 400
    height: 400
    anchors.centerIn: parent
    color: 'green'

    Text {
        text: "SIZE ME!!!"
        anchors.centerIn: parent
        color: 'white'
        font.pointSize: {
            if (main_window.main_w < main_window.width)
                return main_window.main_w / 35 // we need 20pt
            return main_window.width / 35
        }
        visible: {
            if (parent.width < 100)
                return false
            return true
        }
    }
}

它有效，但不太优雅。也许有一些方法可以自动调整文本大小。如果ColumnLayout 中的换行不起作用。

请帮忙。谢谢

这是我的代码，fontSizeMode 正在尝试：

Rectangle {
id: root
width: 700
height: 700
property int mrg: 10   

Rectangle {
    anchors.centerIn: parent
    width: 400
    height: 400
    color: 'green'

    Text {
        id: field
        text: "Size me!"
        minimumPointSize: 10
        font.pointSize: 60
        fontSizeMode: Text.Fit
        color: 'white'
        anchors.centerIn: parent
    }
}
}

【问题讨论】：

标签： qt qml qtquick2

【解决方案1】：

使用文本元素 fontSizeMode 属性设置自动调整大小（Text.HorizontalFit、Text.VerticalFit 或 Text.Fit）。您可以使用minimumPixelSize 属性调整最小字体大小。

详情请见http://doc.qt.io/qt-5/qml-qtquick-text.html#fontSizeMode-prop

【讨论】：

我查看了这些方法，但由于某种原因，没有效果
@v_sith_v：您能否编辑您的问题，包括您对fontSizeMode-property 的尝试？
我发现了这个问题。你的建议是对的。谢谢
还有两件事：font.pointSize（或font.pixelSize）实际上是最大尺寸。字体将不适合此值。对于非常高的清晰度，请设置很大的值。第二件事是：在表单编辑器中，字体大小允许的最大值是 400。对于更大的值，您将不得不使用文本编辑器

【解决方案2】：

我也有这个问题，但想通了，您只需要设置相对于您想要放置文本的项目/对象（父级）的文本项目的宽度和高度。这是一个工作示例：

import QtQuick 2.7

Rectangle {
    id: root
    width: 700
    height: 700
    property int mrg: 10   

    Rectangle {
        anchors.centerIn: parent
        width: root.width * 0.5
        height: root.height * 0.5
        color: 'green'

        Text {
            id: field
            width: parent.width
            height: parent.height
            text: "Size me!"
            minimumPointSize: 10
            font.pointSize: 60
            fontSizeMode: Text.Fit
            color: 'white'
            anchors.centerIn: parent
        }
    }
}

PS：如果矩形非常小，由于 minimumPointSize: 10，文本可能会挂起。

【讨论】：