[Qt-qml] Text eliding

[Jesus Fernandez]

Hi

I have just finished a eliding & scrolling custom component. Take a
look at it. It can help you.

Best regards!

import QtQuick 1.0

Rectangle {
    property string text: "Lorem ipsum dolor sit amet."
    property bool scrolling: false
    property alias font: elidedText.font
    property alias boundsBehaviour: flickable.boundsBehavior
    id: root
    width: 200; height: 232

    Text {
        id: invisibleText
        visible: false
        text: root.text
        font: elidedText.font
    }

    Flickable {
        id: flickable
        anchors.fill: parent
        contentWidth: invisibleText.paintedWidth
        contentHeight: invisibleText.paintedHeight
        flickableDirection: Flickable.HorizontalFlick
        interactive: invisibleText.width > root.width
//        boundsBehavior: Flickable.StopAtBounds

        Text {
            id: elidedText
            width: root.width
            text: root.text
            elide: Text.ElideRight
        }

        onAtXEndChanged: {
            if(atXEnd)
            {
                animationTimer.stop();
                restartTimer.start();
            }
        }

        onMovementStarted: {
            animationTimer.stop();
            restartTimer.stop();
            startTimer.stop();
        }

        onMovementEnded: {
            if(atXEnd)
                restartTimer.start();
            else
                startTimer.start();
        }
    }

    Timer {
        id: startTimer
        interval: 2000
        running: invisibleText.width > root.width
        onTriggered: {
            animationTimer.start();
        }
    }

    Timer {
        id: animationTimer
        interval: 50
        running: false
        repeat: true
        onTriggered: flickable.contentX += 2
    }

    Timer {
        id: restartTimer
        interval: 2000
        running: false
        repeat: false
        onTriggered: {
            flickable.contentX = 0;
            if(invisibleText.width > root.width)
                startTimer.start();
        }
    }

    states: [
        State {
            name: "scrolling"
            when: !flickable.atXBeginning
            PropertyChanges {
                target: elidedText
                elide: Text.ElideNone
            }
            PropertyChanges {
                target: startTimer
                running: false
            }
            PropertyChanges {
                target: root
                scrolling: true
            }
        }
    ]
}


On 06/09/2011, Bo Thorsen <bo at fioniasoftware.dk> wrote:
> I'm trying to ellide a text item, but it's proving quite complicated.
> I'm tempted to implement my own C++ based QML class that does this, but
> it just seems silly.
>
> The problem is that Text says it can only elide when you have set the
> width, but I don't have that.
>
> I have something like this:
>
> Item {
>    width: parent.width
>    anchors.centerIn: parent
>    Text {
>      id: text1
>      text: ...
>      elide: Text.ElideRight
>      horizontalAlignment: Text.AlignHCenter
>      verticalAlignment: Text.AlignVCenter
>      font.bold: true
>    }
>    Text {
>      id: text2
>      text: ....
>    }
> }
>
> (most anchors and stuff like that has been omitted)
>
> So I want text1 to elide on the right side, when the combined text of
> the two doesn't fit in the row. What I actually have here is a max width
> which is parent.width - text2.width. In HTML, it would look like this:
> "<center><bold>text1</bold>text2</center>", except that text1 should be
> elided.
>
> It might be that there is a way to set something like this on the text2
> width:
>
> width: max(font.textWidth(text), parent.width - text2.width)
>
> But I haven't been able to figure out how to do that.
>
> Any good ideas?
>
> Bo Thorsen,
> Fionia Software.
>
> --
>
> Expert Qt and C++ developer for hire
> Contact me if you need expert Qt help
> http://www.fioniasoftware.dk
> _______________________________________________
> Qt-qml mailing list
> Qt-qml at qt.nokia.com
> http://lists.qt.nokia.com/mailman/listinfo/qt-qml
>