qt - How to design a multi-level fluid layout in QML -

-

i have designed layout in qml learn more features , have questions on "best practices" in designing such layout. here is:

enter image description here

it columnlayout consisted of 3 rowlayouts, each 1 rectangles. size of each row , rectangle should calculate such as:

  • first row: height = 40%, width = 100%
    • red rectangle filling whole area
  • second row: height = 20%, width = 100%
    • dark-green rectangle: height = 100%, width = 20%,
    • light-green rectangle: height = 100%, width = 80%
  • third row: height = 40%, width = 100%
    • dark-blue rectangle: height = 100%, width = 40%,
    • blue rectangle: height = 100%, width = 20%
    • light-blue rectangle: height = 100%, width = 40%

the qml have came working , in following. have questions it:

  1. i have set width , height percentages using layout.preferredheight: x*parent.height pattern. other options caused issues (e.g. preferredheight caused binding loop warnings). approach correct , efficient?
  2. as hack, set layout.fillwidth: true first element of row #2 , row #3, doesn't make sense me, work. if set width percentage (e.g. layout.preferredwidth: 0.2*parent.width) row collapse width 0. expected behavior? there better workaround?
  3. do have recommendation on layouts? on right path?

here qml code layout:

applicationwindow {     x: 500     y: 100     width: 250     height: 150     visible: true      columnlayout {         anchors.fill: parent         spacing: 0         rowlayout {             spacing: 0             layout.preferredheight: 0.4*parent.height             layout.fillheight: false             rectangle {                 layout.fillheight: true                 layout.fillwidth: true                 color: "red"             }         }         rowlayout {             spacing: 0             layout.preferredheight: 0.2*parent.height             layout.fillheight: false             rectangle {                 layout.fillheight: true                 layout.fillwidth: true                 color: "darkgreen"             }             rectangle {                 layout.fillheight: true                 layout.preferredwidth: 0.8*parent.width                 color: "lightgreen"             }         }         rowlayout {             spacing: 0             layout.preferredheight: 0.4*parent.height             layout.fillheight: false             rectangle {                 layout.fillheight: true                 layout.fillwidth: true                 color: "darkblue"             }             rectangle {                 layout.fillheight: true                 layout.preferredwidth: 0.2*parent.width                 color: "blue"             }             rectangle {                 layout.fillheight: true                 layout.preferredwidth: 0.4*parent.width                 color: "lightblue"             }         }     } }

update:

my approach seems more hacky expected:

  1. putting text elements children in layout raises binding loop warnings like:

qml qquicklayoutattached: binding loop detected property "preferredwidth"

if wrap text inside rectangle warnings disappear.

  1. the spacing: 0 seems play important role. omitting causes binding loop warnings.

while approach fluid layout design in qml works, has serious issue , might not fall under "best practices".

qtquick.layout not provide real improvements on classical anchoring system. recommand avoid them. can have way more control on layout using anchors.

here exact same design without qtquick.layout :

applicationwindow {     x: 500     y: 100     width: 250     height: 150     visible: true      column {         anchors.fill: parent          row {             anchors.left: parent.left             anchors.right: parent.right             height: 0.4 * parent.height              rectangle {                 anchors.top: parent.top                 anchors.bottom: parent.bottom                 width: parent.width                 color: "red"             }         }          row {             anchors.left: parent.left             anchors.right: parent.right             height: 0.2 * parent.height              rectangle {                 anchors.top: parent.top                 anchors.bottom: parent.bottom                 width: 0.2 * parent.width                 color: "darkgreen"             }              rectangle {                 anchors.top: parent.top                 anchors.bottom: parent.bottom                 width: 0.8 * parent.width                 color: "lightgreen"             }         }          row {             anchors.left: parent.left             anchors.right: parent.right             height: 0.4 * parent.height              rectangle {                 anchors.top: parent.top                 anchors.bottom: parent.bottom                 width: 0.4 * parent.width                 color: "darkblue"             }             rectangle {                 anchors.top: parent.top                 anchors.bottom: parent.bottom                 width: 0.2 * parent.width                 color: "blue"             }             rectangle {                 anchors.top: parent.top                 anchors.bottom: parent.bottom                 width: 0.4 * parent.width                 color: "lightblue"             }         }     } }

so far never met design impossible without qtquick.layout.


Comments

Post a Comment

Popular posts from this blog

python - TypeError: start must be a integer -

-
i trying draw 5 turtles, getting typeerror on line 25. here code: import turtle wn = turtle.screen() redrose = turtle.turtle() color = input("what background color be?") fillcolor_f = input("what color of rose be?") redrose.hideturtle() redrose.speed(30) redrose.penup() redrose.left(180) redrose.forward(175) redrose.right(90) redrose.forward(30) redrose.right(90) redrose.pendown() def drawrose(red): redrose.color("pink") redrose.fillcolor(fillcolor_f) redrose.fill(true) in range(red): redrose.forward(i) redrose.right(49) in range(5): drawrose(redrose) redrose.penup() redrose.forward(350) redrose.right(144) redrose.pendown() redrose.fill(false) drawrose(50) wn.bgcolor(color) i trying draw 5 roses, produces errors. doing in interactivepython.org. you recursively calling drawrose wrong parameter. on line 23 ( for in range(red): ) expect red integer...
Read more

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

-
i have following code almost works properly; private void cbstatus_drawitem(object sender, listboxdrawitemeventargs e) { string item = e.item string; if (item != null) { switch (item) { case "1": e.appearance.forecolor = color.green; e.appearance.backcolor = color.green; break; case "2": e.appearance.forecolor = color.orange; e.appearance.backcolor = color.orange; break; case "3": e.appearance.forecolor = color.red; e.appearance.backcolor = color.red; break; } } } when dropdown shown, items forecolor correct, backcolor remains whatever backcolor of theme is; i.e. if i've got set dark theme, backcolor dark, cells in gridview, rather being green/orange/red. i've tried setting e.appearance.options.usebackcolor trying set e....
Read more

django - Creating multiple model instances in DRF3 -

-
1) create multiple model instances 1 api call, asked here: how create multiple model instances django rest framework? tried solution named in link, no success. i trying upload multiple files in 1 api call. result: files uploaded (only once overwrote perform_create) 1 instance created (if send 2 files, latter created instance). my code: class fileuploadserializer(serializers.modelserializer): def __init__(self, *args, **kwargs): many = kwargs.pop('many', true) super(fileuploadserializer, self).__init__(many=many, *args, **kwargs) class meta: model = fileupload read_only_fields = ('created', 'datafile', 'owner') class fileuploadviewset(viewsets.modelviewset): queryset = fileupload.objects.all() serializer_class = fileuploadserializer parser_classes = (multipartparser, formparser, ) def perform_create(self, serializer): file_list = self.request.data.getlist('file') ...
Read more