qml - CircularGauge displayed incorectly - its size is tiny -

i learning style qml's circural gauge , here code chunk: now, background property of circuralgauge basicly identical example's one:

background: canvas {     onpaint:     {         var ctx=getcontext("2d");         ctx.reset();          ctx.beginpath();         ctx.strokestyle="steelblue";         ctx.linewidth=outerradius*0.02;          ctx.arc(outerradius,                 outerradius,                 outerradius-ctx.linewidth/2,                 degreestoradians(valuetoangle(80)-90),                 degreestoradians(valuetoangle(100)-90));          ctx.stroke();     }   // onpaint }   // background 

however, abnormal gauge (tiny one) can see:

why/what missing?

i've managed solve problem. not problem in circural gauge itself, in other component's layout settings: layout.fillheight: true. i've set false , works. here complete code item:

import qtquick 2.7 import qtquick.layouts 1.3 import qtquick.controls 1.4 import qtquick.controls.styles 1.4 import qtquick.extras 1.4  item {     id: uedisplaybrightnesssettingswindow      width: parent.width     height: parent.height      rowlayout     {         anchors.fill: parent          columnlayout         {             layout.fillwidth: true             layout.fillheight: true             layout.alignment: qt.alignhcenter|qt.alignvcenter              circulargauge             {                 layout.fillwidth: true                 layout.fillheight: true                 layout.alignment: qt.alignhcenter|qt.aligntop                  value: uedisplaybrightnessslider.maximumvalue-uedisplaybrightnessslider.value                  minimumvalue: 0                 maximumvalue: uedisplaybrightnessslider.maximumvalue                  style: circulargaugestyle                 {                     tickmarkstepsize: 1.00                     labelstepsize: 10                      function degreestoradians(degrees)                     {                         return degrees*(math.pi/180);                     }   // degreestoradians                      needle: rectangle                     {                         y: outerradius*0.15                          implicitwidth: outerradius*0.03                         implicitheight: outerradius*0.90                          antialiasing: true                          gradient: gradient                         {                             gradientstop                             {                                 position: 0.00                                 color: "lightsteelblue"                             }   // gradientstop                              gradientstop                             {                                 position: 0.80                                 color: "steelblue"                             }   // gradientstop                         }   // gradient                     }   // needle                      tickmark: rectangle                     {                         visible: styledata.value<80||styledata.value%10==0                          implicitwidth: outerradius*0.02                         implicitheight: outerradius*0.06                          antialiasing: true                          color: styledata.value>=80?"steelblue":"lightsteelblue"                     }   // tickmark                      minortickmark: rectangle                     {                         visible: styledata.value<80                          implicitwidth: outerradius*0.01                         implicitheight: outerradius*0.03                          antialiasing: true                          color: "lightsteelblue"                     }   // minortickmark                      tickmarklabel: text                     {                         font.pixelsize: math.max(6, outerradius*0.1)                         text: styledata.value                         color: styledata.value>=80?"steelblue":"lightsteelblue"                         antialiasing: true                     }   // tickmarklabel                       foreground:  rectangle                     {                         width: outerradius*0.2                         height: width                          radius: width/2                          anchors.centerin: parent                          gradient: gradient                         {                             gradientstop                             {                                 position: 0.00                                 color: "steelblue"                             }   // gradientstop                              gradientstop                             {                                 position: 0.70                                 color: "#191919"                             }   // gradientstop                         }   // gradient                     }   // foreground                      background: canvas                     {                         onpaint:                         {                             var ctx=getcontext("2d");                             ctx.reset();                              ctx.beginpath();                             ctx.strokestyle="steelblue";                             ctx.linewidth=outerradius*0.02;                              ctx.arc(outerradius,                                     outerradius,                                     outerradius-ctx.linewidth/2,                                     degreestoradians(valuetoangle(80)-90),                                     degreestoradians(valuetoangle(100)-90));                              ctx.stroke();                         }   // onpaint                     }   // background                 }   // style             }   // circulargauge              slider             {                 id: uedisplaybrightnessslider                  layout.fillwidth: true                 layout.fillheight: false                 layout.alignment: qt.alignhcenter|qt.alignbottom                  updatevaluewhiledragging: true                  tickmarksenabled: true                  stepsize: 1                  minimumvalue: 0                 maximumvalue: 100                  style: sliderstyle                 {                     handle: rectangle                     {                         width: uedisplaybrightnesssettingswindow.width/10                         height: width                          radius: height                          antialiasing: true                          color: control.pressed?"lightsteelblue":"steelblue"                     }   // handle                      groove: rectangle                     {                         width: uedisplaybrightnesssettingswindow.width                         height: uedisplaybrightnesssettingswindow.width/35                          gradient: gradient                         {                             gradientstop                             {                                 position: 0.00                                 color: "steelblue"                             }   // gradientstop                              gradientstop                             {                                 position: 0.50                                 color: "lightsteelblue"                             }   // gradientstop                              gradientstop                             {                                 position: 1.00                                 color: "steelblue"                             }   // gradientstop                         }   // gradient                     }   // groove                 }   // syle             }   // slider         }   // columnlayout     }   // rowlayout }   // item