Question

我正在使用QML制作视频播放器应用。

我目前在用QML实现字幕方面遇到问题。

我当前的字幕代码是：

Rectangle {
    id: nativeSubtitles
    height: nativeSubs.font.pixelSize + 4
    visible: true
    anchors.left: controlsBar.left
    anchors.right: controlsBar.right
    anchors.bottom: progressBar.top
    radius: 5
    color: "transparent"

    Label {
        id: nativeSubs
        width: parent.width
        text: "SUBTITLES! OWO YESH f rre e er erwwew we wewe ew ew ew eew ewew ew ewwe3wwe ew "
        color: "white"
        font.family: notoFont.name
        font.pixelSize: 24
        renderType: Text.NativeRendering
        horizontalAlignment: Text.AlignHCenter
        opacity: 1
        background: Rectangle {
            color: "orange"
            anchors.left: parent.left
            anchors.right: parent.right
        }
    }
}

这不符合我的要求。

我希望字幕的工作原理是它们位于controlsbar的左右两侧和底部之间。

如果字幕变得太大而无法容纳在其宽度内，则文本应拆分并添加另一行以垂直增长，但仍应固定在控件栏的底部。

背景仅应占据文本被占用的区域，外部填充为2。

我应该怎么做？我花了很长时间才努力使事情正常进行……

编辑：感谢https://stackoverflow.com/a/52955752/10547967

，具有固定垂直换行的新代码

Rectangle {
    id: nativeSubtitles
    height: nativeSubs.font.pixelSize + 4
    visible: true
    anchors.left: controlsBar.left
    anchors.right: controlsBar.right
    anchors.bottom: progressBar.top
    radius: 5
    color: "transparent"

    Label {
        id: nativeSubs
        width: parent.width
        text: "SUBTITLES! OWO YESH f rre e er erwwew we wewe ew ew ew eew ewew ew ewwe3wwe ew "
        color: "white"
        font.family: notoFont.name
        font.pixelSize: 24
        renderType: Text.NativeRendering
        horizontalAlignment: Text.AlignHCenter
        anchors.bottom: parent.top
        opacity: 1
        wrapMode: Text.WrapAtWordBoundaryOrAnywhere

        background: Rectangle {
            color: "orange"
            anchors.left: parent.left
            anchors.right: parent.right
        }
    }
}

现在，所有需要修复的是仅当文本不占据控件左右锚点之间空格的整个宽度时，背景才是文本的宽度。

Answer 1

尝试使用function strToByte(str) { var arr = []; for (var i = 0; i < str.length; i++) { arr.push(str.charCodeAt(i)); } return arr;属性Label

wrapMode: Text.WrapAtWordBoundaryOrAnywhere

设置此属性可将文本换成Text项的宽度。仅当设置了显式宽度时，文本才会换行。 wrapMode可以是以下之一：

wrapMode : enumeration

来自Text QML Type

[第二次更新]

有两种方法

您可以使用Text.NoWrap (default) - no wrapping will be performed. If the text contains insufficient newlines, then contentWidth will exceed a set width. Text.WordWrap - wrapping is done on word boundaries only. If a word is too long, contentWidth will exceed a set width. Text.WrapAnywhere - wrapping is done at any point on a line, even if it occurs in the middle of a word. Text.Wrap - if possible, wrapping occurs at a word boundary; otherwise it will occur at the appropriate point on the line, even in the middle of a word. Text.WrapAtWordBoundaryOrAnywhere元素（需要QtQuick 2.5 ）
```
TextMetrics
```

2。您可以使用 nativeSubtitles Rectangle的属性 childrenRect，即TextMetrics { id: t_metrics font: nativeSubs.font text: nativeSubs.text } Rectangle { id: nativeSubtitles height: t_metrics.tightBoundingRect.height visible: true anchors.left: controlsBar.left anchors.right: controlsBar.right anchors.bottom: progressBar.top radius: 5 color: "transparent" Label { id: nativeSubs width: parent.width text: "SUBTITLES! OWO YESH f rre e er erwwew we wewe ew ew ew eew ewew ew ewwe3wwe ew " wrapMode: Text.WrapAtWordBoundaryOrAnywhere color: "white" font.pixelSize: 24 renderType: Text.NativeRendering horizontalAlignment: Text.AlignHCenter opacity: 1 background : Rectangle { color: "orange" anchors.left: parent.left anchors.right: parent.right height: t_metrics.tightBoundingRect.height } } }（nativeSubtitles.childrenRect.height + p：一些填充）

只需将p上方的代码替换为t_metrics.tightBoundingRect.height

For an adaptive rectangle

nativeSubtitles.childrenRect.height + p

使用背景和垂直换行在QML中创建字幕

1 个答案:

有两种方法

For an adaptive rectangle