Flutter learning notes (23) — layout widget of multiple sub elements (rwo, column, stack, indexedstack, table, wrap)

Time:2019-11-9

For reprint, please indicate the source:Flutter learning notes (23) — layout widget of multiple sub elements (rwo, column, stack, indexedstack, table, wrap)

 

In the previous article, I combed the widgets with a single sub element layout. Today, I combed the widgets with multiple sub element layouts.

  • Row

Common properties of row component are as follows:

Mainaxisalignment: arrangement of spindles

Crossaxisalignment: arrangement of secondary axis

Mainaxissize: how much space should the spindle occupy? Max is the maximum and min is the minimum

Children: component child element. Its essence is a list

For row, the horizontal direction is the main axis and the vertical direction is the secondary axis.

Let’s first look at the values of the mainaxisalignment property

enum MainAxisAlignment {
  Start, // place the child control at the beginning of the spindle
  End, // place the child control at the end of the spindle
  Center, // place the child control in the middle of the spindle
  Spacebetween, // evenly divide the blank position of the main axis and arrange the sub elements. There is no gap between the head and the tail
  Spacearound, // divide the main axis blank area equally, so that the spacing between the middle sub controls is equal, and the spacing between the first and last sub controls is half of the spacing between the middle sub controls
  Spaceever, // divide the main axis blank area equally, so that the subspace spacing is equal
}

Demo example:

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            new Text('11111111111'),
            new Text('22222222222'),
            new Text('33333333333')
          ],
        ),
      ),
    );
  }
}

  • Column

Common properties of column component are as follows:

Mainaxisalignment: arrangement of spindles

Crossaxisalignment: arrangement of secondary axis

Mainaxissize: how much space should the spindle occupy? Max is the maximum and min is the minimum

Children: component child element. Its essence is a list

For column, the vertical direction is the main axis and the horizontal direction is the secondary axis, which is similar to row in use

Demo example:

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            new Text('11111111111'),
            new Text('22222222222'),
            new Text('33333333333')
          ],
        ),
      ),
    );
  }
}

  • Stack

Stack/alignment:

Each subcomponent of the stack component must be positioned or not positioned. The positioned subcomponent is wrapped with the positioned component. The stack component itself contains all the non positioned subcomponents. The subcomponent is positioned according to the alignment attribute (the default is the upper left corner). Then they are placed on the stack component according to the top, right, bottom, left attributes of the positioned subcomponents.

Since stack is a component that allows child elements to be stacked, what are the attribute values that locate the stacking position?

Alignment attribute values: bottom middle position of bottomcenter, bottom left position of bottomleft, bottom right position of bottomright, center middle position, center left position of centerleft middle, center right position of centerright middle, top middle position of topcenter top, top left position of topleft top, top right position of right top

Demo example:

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Center(
          child: new Stack(
            alignment: Alignment.centerLeft,
            children: [
              new Container(
                width: 200.0,
                height: 200.0,
                color: Colors.blue,
              ),
              New text ('This is a piece of text ')
            ],
          ),
        ),
      ),
    );
  }
}

Stack/Positioned:

The above example is to stack the sub elements through the positioning provided by the system. However, in practice, the above attribute values often fail to meet the needs of our UI. The UI may require the sub elements to be placed in any unexpected position, so we need to use positioning to locate them.

Location attribute value: distance between top sub element and top boundary, left sub element and left boundary, right sub element and bottom boundary.

Demo example:

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Center(
          child: new Stack(
            children: [
              new Container(
                width: 200.0,
                height: 200.0,
                color: Colors.blue,
              ),
              new Positioned(
                top: 20.0,
                left: 50.0,
                Child: new text ('This is a piece of text ')
              )
            ],
          ),
        ),
      ),
    );
  }
}

  • IndexedStack

Indexedstack inherits from stack, and its function is to display the index child. Other children are invisible, so the size of indexedstack is always the same as that of the largest child node. Because indexedstack is inherited from stack, it has only one more index attribute than stack, that is, the index corresponding to child.

Demo example:

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Center(
          child: new IndexedStack(
            index: 1,
            children: [
              new Container(
                width: 200.0,
                height: 200.0,
                color: Colors.blue,
              ),
              new Positioned(
                top: 20.0,
                left: 50.0,
                Child: new text ('This is a piece of text ')
              )
            ],
          ),
        ),
      ),
    );
  }
}

  • Table

Table table layout, the height of each row is determined by its content, and the width of each column is controlled by the columnWidths attribute separately.

Common properties of table components are as follows:

ColumnWidths: sets the width of each column.

Defaultcolumnwidth: the default width of each column, divided equally by default.

Textdirection: text direction.

Border: table border.

Defaultverticalalignment: the default vertical alignment, top is placed at the top, middle is vertically centered, bottom is placed at the bottom, baseline text is aligned, fill fills the whole cell

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Table(
          defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
          //Sets how many columns the table has, and specifies the column width
          columnWidths:const  {
            0:FixedColumnWidth(40.0),
            1:FixedColumnWidth(40.0),
            2:FixedColumnWidth(60.0),
            3:FixedColumnWidth(60.0),
            4:FixedColumnWidth(130.0),
          },
          //Set table border style
          border: TableBorder.all(
            color: Colors.blue,
            width: 2.0,
            style: BorderStyle.solid
          ),
          children: const [
            //Add first row of data
            TableRow(
              children: [
                SizedBox(
                  Child: text ('name '),
                  height: 30,
                ),
                Text ('gender '),
                Text ('age '),
                Text ('height '),
                Text ('notes'),
              ],
            ),
            //Add second row of data
            TableRow(
              children: [
                Text ('zhang San '),
                Text ('male '),
                Text('20'),
                Text('186'),
                Text ('learning slag '),
              ],
            ),
            //Add third row of data
            TableRow(
              children: [
                Text ('li Si '),
                Text ('male '),
                Text('20'),
                Text('188'),
                Text ('learn to crisp '),
              ],
            ),
            //Add fourth row of data
            TableRow(
              children: [
                Text ('wang Wu '),
                Text ('male '),
                Text('21'),
                Text('177'),
                Text ('learning bully '),
              ],
            ),
            //Add fifth row of data
            TableRow(
              children: [
                Text ('xiaomei '),
                Text ('female ').
                Text('22'),
                Text('170'),
                Text ('learn from God, need to focus on training '),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

  • Wrap

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Children Demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('Children Demo'),
        ),
        body: new Wrap(
          spacing: 3.0,
          Runspacing: 20.0, // spacing in the longitudinal direction
          Alignment: wrapalignment.end, // the way to align the vertical axis
          children: [
            new Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: new Text('A'),
              ),
              Label: new text ('text1 '),
            ),
            new Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: new Text('B'),
              ),
              Label: new text ('text2 '),
            ),
            new Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: new Text('C'),
              ),
              Label: new text ('text3 '),
            ),
            new Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: new Text('D'),
              ),
              Label: new text ('text4 '),
            ),
            new Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: new Text('E'),
              ),
              Label: new text ('text5 '),
            ),
          ],
        ),
      ),
    );
  }
}

 

Recommended Today

The method of obtaining the resolution of display by pyqt5

The code is as follows import sys from PyQt5.QtWidgets import QApplication, QWidget class Example(QWidget): def __init__(self): super().__init__() self.initUI() #Interface drawing to initui method def initUI(self): self.desktop = QApplication.desktop() #Get display resolution size self.screenRect = self.desktop.screenGeometry() self.height = self.screenRect.height() self.width = self.screenRect.width() print(self.height) print(self.width) #Show window self.show() if __name__ == ‘__main__’: #Create applications and objects app […]