textalignment.qml Example File
righttoleft/textalignment/textalignment.qml
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.0
Rectangle id : root
color : "white"
//width: containerColumn.width
//height: containerColumn.height + containerColumn.anchors.topMargin
width : 320
height : 480
property bool mirror : false
property int pxSz : 18
property variant horizontalAlignment : undefined
property variant editorType : ["Plain Text" , "Styled Text" , "Plain Rich Text" , "Italic Rich Text" , "Plain TextEdit" , "Italic TextEdit" , "TextInput" ]
property variant text : ["" , " " , "Hello world!" , "مرحبا العالم!" , "Hello world! Hello!\nHello world! Hello!" , "مرحبا العالم! مرحبا! مرحبا العالم! مرحبا!" ,"مرحبا العالم! مرحبا! مرحبا Hello world!\nالعالم! مرحبا!" ]
property variant description : ["empty text" , "white-space-only text" , "left-to-right text" , "right-to-left text" , "multi-line left-to-right text" , "multi-line right-to-left text" , "multi-line bidi text" ]
property variant textComponents : [plainTextComponent , styledTextComponent , richTextComponent , italicRichTextComponent , plainTextEdit , italicTextEdit , textInput ]
function shortText (horizontalAlignment) {
// all the different QML editors have
// the same alignment values
switch (horizontalAlignment ) {
case Text .AlignLeft :
return "L" ;
case Text .AlignRight :
return "R" ;
case Text .AlignHCenter :
return "C" ;
case Text .AlignJustify :
return "J" ;
default :
return "Error" ;
}
}
Column id : containerColumn
spacing : 10
width : editorTypeRow .width
anchors { top : parent .top ; topMargin : 5 }
ListView width : 320
height : 320
id : editorTypeRow
model : editorType .length
orientation : ListView .Horizontal
cacheBuffer : 1000 //Load the really expensive ones async if possible
delegate : Item {
width : editorColumn .width
height : editorColumn .height
Column id : editorColumn
spacing : 5
width : textColumn .width + 10
Text text : root .editorType [index ]
font .pixelSize: 16
anchors .horizontalCenter: parent .horizontalCenter
}
Column id : textColumn
spacing : 5
anchors .horizontalCenter: parent .horizontalCenter
Repeater model : textComponents .length
delegate : textComponents [index ]
}
}
}
}
}
Column spacing : 2
width : parent .width
Rectangle // button
height : 50 ; width : parent .width
color : mouseArea .pressed ? "black" : "lightgray"
Column anchors .centerIn: parent
Text text : root .mirror ? "Mirrored" : "Not mirrored"
color : "white"
font .pixelSize: 16
anchors .horizontalCenter: parent .horizontalCenter
}
Text text : "(click here to toggle)"
color : "white"
font .pixelSize: 10
font .italic: true
anchors .horizontalCenter: parent .horizontalCenter
}
}
MouseArea id : mouseArea
property int index : 0
anchors .fill: parent
onClicked : root .mirror = !root .mirror
}
}
Rectangle // button
height : 50 ; width : parent .width
color : mouseArea2 .pressed ? "black" : "gray"
Column anchors .centerIn: parent
Text text : {
if (root .horizontalAlignment == undefined )
return "Implict alignment" ;
switch (root .horizontalAlignment ) {
case Text .AlignLeft :
return "Left alignment" ;
case Text .AlignRight :
return "Right alignment" ;
case Text .AlignHCenter :
return "Center alignment" ;
case Text .AlignJustify :
return "Justify alignment" ;
}
}
color : "white"
font .pixelSize: 16
anchors .horizontalCenter: parent .horizontalCenter
}
Text text : "(click here to toggle)"
color : "white"
font .pixelSize: 10
font .italic: true
anchors .horizontalCenter: parent .horizontalCenter
}
}
MouseArea id : mouseArea2
property int index : 0
anchors .fill: parent
onClicked : {
if (index < 0 ) {
root .horizontalAlignment = undefined ;
} else {
root .horizontalAlignment = Math .pow (2 , index );
}
index = (index + 2 ) % 5 - 1 ;
}
}
}
}
}
Component id : plainTextComponent
Text width : 180
text : root .text [index ]
font .pixelSize: pxSz
wrapMode : Text .WordWrap
horizontalAlignment : root .horizontalAlignment
LayoutMirroring .enabled: root .mirror
textFormat : Text .RichText
Rectangle z : -1
color : Qt .rgba (0.8 , 0.2 , 0.2 , 0.3 )
anchors .fill: parent
}
Text text : root .description [index ]
color : Qt .rgba (1 ,1 ,1 ,1.0 )
anchors .centerIn: parent
font .pixelSize: pxSz - 2
Rectangle z : -1
color : Qt .rgba (0.3 , 0 , 0 , 0.3 )
anchors { fill : parent ; margins : -3 }
}
}
Text color : "white"
text : shortText (parent .horizontalAlignment )
anchors { top : parent .top ; right : parent .right ; margins : 2 }
}
}
}
Component id : styledTextComponent
Text width : 180
text : root .text [index ]
font .pixelSize: pxSz
wrapMode : Text .WordWrap
horizontalAlignment : root .horizontalAlignment
LayoutMirroring .enabled: root .mirror
textFormat : Text .RichText
style : Text .Sunken
styleColor : "white"
Rectangle z : -1
color : Qt .rgba (0.8 , 0.2 , 0.2 , 0.3 )
anchors .fill: parent
}
Text text : root .description [index ]
color : Qt .rgba (1 ,1 ,1 ,1.0 )
anchors .centerIn: parent
font .pixelSize: pxSz - 2
Rectangle z : -1
color : Qt .rgba (0.3 , 0 , 0 , 0.3 )
anchors { fill : parent ; margins : -3 }
}
}
Text color : "white"
text : shortText (parent .horizontalAlignment )
anchors { top : parent .top ; right : parent .right ; margins : 2 }
}
}
}
Component id : richTextComponent
Text width : 180
text : root .text [index ]
font .pixelSize: pxSz
wrapMode : Text .WordWrap
horizontalAlignment : root .horizontalAlignment
LayoutMirroring .enabled: root .mirror
textFormat : Text .RichText
Rectangle z : -1
color : Qt .rgba (0.8 , 0.2 , 0.2 , 0.3 )
anchors .fill: parent
}
Text text : root .description [index ]
color : Qt .rgba (1 ,1 ,1 ,1.0 )
anchors .centerIn: parent
font .pixelSize: pxSz - 2
Rectangle z : -1
color : Qt .rgba (0.3 , 0 , 0 , 0.3 )
anchors { fill : parent ; margins : -3 }
}
}
Text color : "white"
text : shortText (parent .horizontalAlignment )
anchors { top : parent .top ; right : parent .right ; margins : 2 }
}
}
}
Component id : italicRichTextComponent
Text width : 180
text : "<i>" + root .text [index ] + "</i>"
font .pixelSize: pxSz
wrapMode : Text .WordWrap
horizontalAlignment : root .horizontalAlignment
LayoutMirroring .enabled: root .mirror
textFormat : Text .RichText
property variant backgroundColor : Qt .rgba (0.8 , 0.2 , 0.2 , 0.3 )
Rectangle z : -1
color : parent .backgroundColor
anchors .fill: parent
}
Text text : root .description [index ]
color : Qt .rgba (1 ,1 ,1 ,1.0 )
anchors .centerIn: parent
font .pixelSize: pxSz - 2
Rectangle z : -1
color : Qt .rgba (0.3 , 0 , 0 , 0.3 )
anchors { fill : parent ; margins : -3 }
}
}
Text color : "white"
text : shortText (parent .horizontalAlignment )
anchors { top : parent .top ; right : parent .right ; margins : 2 }
}
}
}
Component id : plainTextEdit
TextEdit width : 180
text : root .text [index ]
font .pixelSize: pxSz
cursorVisible : true
wrapMode : TextEdit .WordWrap
horizontalAlignment : root .horizontalAlignment
LayoutMirroring .enabled: root .mirror
Rectangle z : -1
color : Qt .rgba (0.5 , 0.5 , 0.2 , 0.3 )
anchors .fill: parent
}
Text text : root .description [index ]
color : Qt .rgba (1 ,1 ,1 ,1.0 )
anchors .centerIn: parent
font .pixelSize: pxSz - 2
Rectangle z : -1
color : Qt .rgba (0.3 , 0 , 0 , 0.3 )
anchors { fill : parent ; margins : -3 }
}
}
Text color : "white"
text : shortText (parent .horizontalAlignment )
anchors { top : parent .top ; right : parent .right ; margins : 2 }
}
}
}
Component id : italicTextEdit
TextEdit width : 180
text : "<i>" + root .text [index ] + "<i>"
font .pixelSize: pxSz
cursorVisible : true
wrapMode : TextEdit .WordWrap
textFormat : TextEdit .RichText
horizontalAlignment : root .horizontalAlignment
LayoutMirroring .enabled: root .mirror
Rectangle z : -1
color : Qt .rgba (0.5 , 0.5 , 0.2 , 0.3 )
anchors .fill: parent
}
Text text : root .description [index ]
color : Qt .rgba (1 ,1 ,1 ,1.0 )
anchors .centerIn: parent
font .pixelSize: pxSz - 2
Rectangle z : -1
color : Qt .rgba (0.3 , 0 , 0 , 0.3 )
anchors { fill : parent ; margins : -3 }
}
}
Text color : "white"
text : shortText (parent .horizontalAlignment )
anchors { top : parent .top ; right : parent .right ; margins : 2 }
}
}
}
Component id : textInput
Item width : 180
height : textInput .text .length > 20 ? 3 * textInput .height : textInput .height
TextInput id : textInput
width : 180
text : root .text [index ]
font .pixelSize: pxSz
cursorVisible : true
horizontalAlignment : root .horizontalAlignment
LayoutMirroring .enabled: root .mirror
Rectangle z : -1
color : Qt .rgba (0.6 , 0.4 , 0.2 , 0.3 )
anchors .fill: parent
}
Text text : root .description [index ]
color : Qt .rgba (1 ,1 ,1 ,1.0 )
anchors .centerIn: parent
font .pixelSize: pxSz - 2
Rectangle z : -1
color : Qt .rgba (0.3 , 0 , 0 , 0.3 )
anchors { fill : parent ; margins : -3 }
}
}
Text color : "white"
text : shortText (parent .horizontalAlignment )
anchors { top : parent .top ; right : parent .right ; margins : 2 }
}
}
}
}
}
