Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Kivy: BoxLayout vs. GridLayout

Tags:

python

kivy

BoxLayout(orientation='vertical') vs. GridLayout(cols=1):

They both do the same thing, no? Is there a reason to choose one over the other?

like image 541
Noob Saibot Avatar asked Aug 14 '13 02:08

Noob Saibot


People also ask

What is GridLayout Kivy?

The GridLayout arranges children in a matrix. It takes the available space and divides it into columns and rows, then adds widgets to the resulting “cells”. Changed in version 1.0. 7: The implementation has changed to use the widget size_hint for calculating column/row sizes.

What is Kivy Uix?

Module: kivy.uix. Widgets are elements of a graphical user interface that form part of the User Experience. The kivy. uix module contains classes for creating and managing Widgets. Please refer to the Widget class documentation for further information.

What is padding in Kivy?

The padding argument tells Kivy how much space there should be between the Layout and its children, whereas the spacing arguments tells it how much spacing there should be between the children. To create the buttons, we use a simple loop that loops over a small range of numbers.


1 Answers

The differences involves size and position.

In general, GridLayout (cols: 1) is always going to keep the elements in one column, whereas there is more flexibility to organize individual widgets when you use BoxLayout (orientation: 'vertical').

Here is a very simple example of something you can do with BoxLayout because it honours pos_hint, size and size_hint (and others such as center_x, x, y, right, - notice that they also depend on the vertical or horizontal orientation of the BoxLayout) which affects individual widgets:

<Test@BoxLayout>:
    orientation: 'vertical'
    Button:
        text: 'a'
        size_hint: None, None
        size: 100,50
        pos_hint: { 'center_x' : .5 }
    Button:
        text: 'b'

This is the output in a 200x200 screen:

BoxLayout with vertical orientation

If you attempt to do the same but using GridLayout instead, then you get this:

GridLayout with cols: 1

Finally, GridLayout has some properties to control the size of the column:

  • col_default_width: for the default width of all the columns
  • col_width: a list of widths for each column (not useful in this case since we have just one)
  • col_force_default: which will ignore any existing size_hint or size for individual widgets and force the column width
  • minimum_width: so the column not shrink too much
like image 156
toto_tico Avatar answered Oct 08 '22 20:10

toto_tico