如何在 Tumbler 组件中显示不同大小的非活动项目答案

【问题标题】：How to display different sizes for inactive items in Tumbler component如何在 Tumbler 组件中显示不同大小的非活动项目
【发布时间】：2023-01-21 06:03:53
【问题描述】：

我正在尝试构建一个应用程序，对于时间设置，我正在尝试为此项目使用 Tumbler 组件。我查看了 Tumbler 的 qml 文档，但找不到 Tumbler 的任何大小设置。我可以更改整个 Tumbler 字体大小，但我正在寻找的是更改非当前项目的大小。如果我选择时间为 12:24:AM，我想在一些不同的字体大小上看到 11、13、23 和 25。这是例子

import QtQuick
import QtQuick.Window
import QtQuick.Controls

Rectangle {
width: frame.implicitWidth + 10
height: frame.implicitHeight + 10

function formatText(count, modelData) {
    var data = count === 12 ? modelData + 1 : modelData;
    return data.toString().length < 2 ? "0" + data : data;
}

FontMetrics {
    id: fontMetrics
}

Component {
    id: delegateComponent

    Label {
        text: formatText(Tumbler.tumbler.count, modelData)
        opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        font.pixelSize: fontMetrics.font.pixelSize * 1.25
    }
}

Frame {
    id: frame
    padding: 0
    anchors.centerIn: parent

    Row {
        id: row

        Tumbler {
            id: hoursTumbler
            model: 12
            delegate: delegateComponent
        }

        Tumbler {
            id: minutesTumbler
            model: 60
            delegate: delegateComponent
        }

        Tumbler {
            id: amPmTumbler
            model: ["AM", "PM"]
            delegate: delegateComponent
        }
    }
  }
}

“font.pixelSize: fontMetrics.font.pixelSize * 1.25”这一行改变了整个组件的字体大小。如何更改 Tumbler 上值和下值的字体大小？

【问题讨论】：

标签： qt qml qtquick2

【解决方案1】：

您可以使用 Tumbler.displacement 属性来表示该项目与当前项目的距离。

Tumbler {
    anchors.centerIn: parent
    model: 60
    delegate: Text {
        text: modelData
        font.pixelSize: 16 + Math.abs(Tumbler.displacement) * 10
        horizontalAlignment: Text.AlignHCenter
    }
}

【讨论】：

感谢您提供此信息，但我可以使用它来更改那些不是当前字体的项目的字体大小吗？
你试过这个例子吗？相对于当前项目，这会更改所有项目的字体。离当前元素越远，字体越大。

【解决方案2】：

尝试通过检查 Tumbler.displacement === 0 来设置你的 font.pixelSize，如下所示：

        font.pixelSize: Tumbler.displacement === 0
                            ? fontMetrics.font.pixelSize * 1.25
                            : fontMetrics.font.pixelSize

看了@folibis 的回答后，它启发了我写这个变体，它会导致字体离当前项目越远价值越低：

        font.pixelSize: fontMetrics.font.pixelSize * 1.25 / ( 1 + Math.abs(Tumbler.displacement))

【讨论】：