qtquick2 - QML: Center variable text and image -

-

i need horizonally center variable-length text (red box) , image (yellow box) in big box (green box). text shall wrap if not fit box.

drawing

existing code:

item {     id: bigbox     x: 255     y: 0     width: 800     height: 100     image {         id: imagebox         source: "image.png"         width: 52         height: 46         anchors.left: parent.left         anchors.leftmargin: 12         anchors.verticalcenter: parent.verticalcenter         horizontalalignment: image.alignleft         verticalalignment: image.alignvcenter         fillmode: image.pad     }      text {         id: textbox         anchors.left: symbol.right         anchors.leftmargin: 12         anchors.right: parent.right         anchors.verticalcenter: parent.verticalcenter         text: qstr("heading text")         font.pixelsize: 36         font.bold: true         horizontalalignment: text.aligncenter     } }

update:

actual running code , real screenshot showing problem:

import qtquick 2.0  rectangle {     id: mask     x: 0     y: 0     width: 800     height: 430     color: "#ffffff"     property int pagestate: 0     rectangle {         x: 0         y: 0         width: 111         height: 100         color: "#0000ff"     }     item {         id: whitespace         x: 117         y: 0         width: 800-x         height: 100         row {             anchors.centerin: parent             image {                 id: symbol                 source: "../img/pepper.png"                 width: 52                 height: 46                 anchors.verticalcenter: parent.verticalcenter                 fillmode: image.pad             }             text {                 id: heading                 property var texts: ["active blabla","active blaaaaaaah blaaaah ","active blabla , blaaaaaaah blaaaah"]                 anchors.verticalcenter: parent.verticalcenter                 color: "#333191"                 text: texts[pagestate]                 font.family: "liberation sans"                 font.pixelsize: 36                 font.bold: true                 horizontalalignment: text.alignleft                 verticalalignment: text.alignvcenter                 wrapmode: text.wrapatwordboundaryoranywhere                 textformat: text.plaintext                 width: math.min(150,contentwidth)             }         }     }     rectangle {         id: stage         x: 0         y: 106         width: parent.width         height: parent.height-y         color: "#ffff00"     }     timer {         interval: 1000 // milliseconds         triggeredonstart: true         repeat: true         running: true         ontriggered: {             pagestate=(pagestate+1)%3;         }     } }

screenshot

the white area top right green box in first picture. timer runs through 3 texts, real application do.

changing first parameter of math.min() 600 not change anything.

my set of hacks solve problem:

item {     // ...     text {         function escapehtml(text)         {             return text.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");         }          function tohtml(imageurl,text)         {             var textlines=escapehtml(text).replace(/\r?\n/,"\n").split("\n");             var retval="<center>";             retval=retval+'<table><tr>';             if (imageurl!="") {                 retval=retval+'<td rowspan="'+(textlines.length)+'"><img src="'+imageurl+'"></td>';                 retval=retval+'<td rowspan="'+(textlines.length)+'">&nbsp;</td>';             }             (var i=0; i<textlines.length; i++) {                 if (i>0) {                     retval=retval+"<tr>";                 }                 retval=retval+'<td>'+textlines[i]+'</td></tr>';             }             retval=retval+'</table>';             retval=retval+"</center>";             return retval;         }          anchors.fill: parent         verticalalignment: text.alignvcenter         textformat: text.richtext         text: tohtml("../img/pepper.png",qstr("heading"))     } }
  • <center> centers text in available space, not image (it stays left - bug!).
  • <table> can centered <center>, , can contain image.
  • wrapping not work expected, translated text returned qstr() has contain linebreaks @ right positions.
  • tohtml() splits @ linebreaks , generates table rows that.
  • the image needs table cell rowspan, or else image placed high relative text.
  • and finally, verticalalignment: text.alignvcenter places of vertically centered -- except table borders luckily don't need. (if bored, add border=1 <table> tag.)

and no, html , css subset supported text.richtext not support vertical alignment. rendering engine behaves ancient browsers, have stack hacks , workarounds if still 1996.


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5);
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:
Read more

Python Pig Latin Translator -

-
so have been working on @ codecademy.com while trying learn python. don't know if blind , can't see why won't work or what. here's code won't let me use. function print variable if had typed in , print "empty" if didn't type anything. print "welcome english pig latin translator!" original = raw_input("what's name?") if len(original) > 0 print original else print "empty" if len(original) > 0 else the above lines contains syntax errors. try: if len(original) > 0: else: note added colons, ( : ).
Read more