Qml Text shows only partly.

FeelFree

Hi, everyone!

I am running my pure QQuick app on an embedded device(with EGLFS). Now I get in trouble with text showing, and find nothing helpful. Please help if you have any idea or clues.

Thank you for reply!
My best regards!

jsulm

@FeelFree How do you show the text? Do you use layouts? Please show your code, else others can only guess...

FeelFree

Ha, I am sorry. I forgot it. This is my code:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import "qrc:/res/qml"


Rectangle {
    color: "green"

    ScrollView {
        width: parent.width
        height : parent.height
        contentWidth: contentView.width
        contentHeight: contentView.height

        clip : true

        Column {
            anchors.fill: parent
            width: parent.width
            
            Button {
                id: btnExit
                height : 50
                text : qsTr("退出")
            }
            RowLayout {
                id: rowLayout2
                Layout.columnSpan: 2
                Layout.alignment: Qt.AlignRight
                Button {
                    height: 50
                    text : qsTr("展示普通页面")
                }

                
                Button {
                    height: 50
                    text : qsTr("展示页面时销毁部分其他页面")
                }
            }


            Button {
                id: btnShowDialog
                height: 50
                text : qsTr("展示弹窗")
            }

            Button {
                id: btnShowSystemDialog
                height: 50
                text : qsTr("展示SystemDialog")
            }
        }
    }

}

This is my second page, while in my first page, every thing is ok:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import "qrc:/res/qml"

Rectangle {
    id: rootView
    color: "red"

    ScrollView {
        width: parent.width
        height : parent.height

        clip : true

        Column {
            id: contentView
            width: parent.width

            Button {
                id: btnShow
                width: 0.4 * parent.width
                height : 50
                // text : qsTr("退出、展示通、页面、弹窗、Toast")
                text : qsTr("页面、弹窗、Toast")
            }
               
        }
    }
}

Some new clues are found now. There is nothing wrong in first page, and if I show the word in first page first, like the annotated code, then in second page, the word shows correctly.

I reappear this scene by kill my app in second page, and restart the process to show the first page, then the second. It's very easy to reappear. So I am wondering if it is associated with linux font cache, but sadly I know nothing about it.

FeelFree

@FeelFree said in Qml Text shows only partly.:

this scene by kill my app in second page, and restart the pro

ps: above is the second page, below is the first one. The page is add by "Qt.createComponent" and "component.createObject". It is very complex, so I igore it in the code.

FeelFree

The code is simplified to a pure qml app below, and the questions still exists:

    QQuickView view;
    view.setResizeMode(QQuickView::SizeRootObjectToView);
    view.setSource(QUrl("qrc:res/qml/EmptyLoader.qml"));
    view.show();

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import "qrc:/res/qml"

Rectangle {
    id: rootView
    color: "red"
    width: parent.width
    height: parent.height

    property var outterRoot;

    ScrollView {
        width: parent.width
        height : parent.height
        contentWidth: contentView.width
        contentHeight: contentView.height

        clip : true

            Column {
                id: contentView
                width: parent.width
                leftPadding: 10
                spacing: 5

                Button {
                    id: btnShowWindowManager
                    background: Rectangle {
                        color: "#A43567"
                    }

                    width: parent.width
                    height : 50
                    text : "页面、弹窗、Toast"

                    onClicked: {
                        rootView.visible = false;
                        outterRoot.loadQml("WindowManagerPage.qml");
                    }
                }
            }
    }
}

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import "qrc:/res/qml"


Rectangle {
    color: "green"
    width: parent.width
    height: parent.height

    ScrollView {
        width: parent.width
        height : parent.height

        clip : true

        Column {
            anchors.fill: parent
            width: parent.width
            spacing : 5
            
            Button {
                id: btnExit
                height : 50
                
                contentItem: Text {
                    color: "red"
                    text : "退hah出出我是测试文本，我要测试执行速度，我觉得会丢子，你好"
                }
            }
        }
    }

}

FeelFree

hah, I found the solution now. There is something wrong with distance field text rendering. This probleam occurs in my embedded system, and behaves well on PC. After setting "export QML_DISABLE_DISTANCEFIELD=true", the probleam is solved. see more:https://www.qt.io/blog/2011/07/15/text-rendering-in-the-qml-scene-graph

The article is hard to understand, does anyone has other introductions about text rendering?