Flutter controls exercise demo address: github

A Row and Column

1. Introduction to the

Because Row and Column inherit from Flex, their properties are Flex properties as well

  • Row is a common control in Flutter. One arranges children horizontally. If there is not enough space on the Row. Having no scroll of its own.
  • Column is also a common control in Flutter. The children are arranged vertically. If there’s not enough space for Column. Having no scroll of its own.

2. attribute

2.1 mainAxisAlignment (Spindle alignment)

For a Row, horizontal is the main axis. Perpendicularity is the intersecting axis. For Column, vertical is the main axis. Horizontal is where the cross axis puts the children on the axis. To verify this property, remember to set mainAxisSize to mainAxissize.max,

The values instructions Style image (Rowd demo)
Mainaxisalignment.start (default) Put children at the head of the spindle
MainAxisAlignment.center Put the children in the middle of the main axis
MainAxisAlignment.end Put the children at the end of the main axis
MainAxisAlignment.spaceAround Divide the blank area in the main axis so that the space between children is equal, but the blank part of the first and last childre is half
MainAxisAlignment.spaceBetween The blank area along the main axis is evenly divided so that the space between children is equal, but the first and the last childre are close to the end and there is no empty thread
MainAxisAlignment.spaceEvenly Divide the blank area along the main axis so that the space between children is equal, including the head and tail childre

2.2 mainAxisSize

You can specify the size of your Row or Column.

  • MainAxisSize. Min: In the main axis direction, wrap childre. Equivalent to wrap_content in Android
  • Mainaxissize.max (default) : the size of the parent Widget across (Row or Column) in the main axis direction. Equivalent to Match_parent in Android

An axis perpendicular to the main axis

A cross axis is exactly what the name suggests: an axis perpendicular to the main axis opposite the Row. The cross axes are perpendicular. For Column, the cross axis is horizontal. Again, take Row as an example

The values instructions Graphics demo (Row)
CrossAxisAlignment.start Place children on the head of the cross axis
CrossAxisAlignment.end Put children at the end of the cross axis
CrossAxisAlignment.center Place children in the middle of the cross axis
CrossAxisAlignment.stretch Let children fill the cross axis direction None (No test found, control can not be found)
CrossAxisAlignment.baseline Align children with the baseline. If the main axis is vertical, this value is used as a start. TextBaseline cannot be null if this property is set

2.4 textDirection

How children are arranged on the principal axis. Plus or minus

Row
  • Textdirection. LTR: indicates in the horizontal direction (main axis). From left to right, left is the head, right is the tail
  • Textdirection. RTL: indicates in the horizontal direction (main axis). From right to left, right is the head, left is the tail
Column
  • Textdirection. LTR: indicates in the vertical direction (main axis). From top to bottom, top for head, bottom for tail
  • Textdirection. RTL: indicates in the vertical direction (main axis). From bottom to top, bottom for head, top for tail

2.5 verticalDirection

How children are arranged on the intersecting axes. Plus or minus

Row
  • Verticaldirection. down: indicates in the VerticalDirection (cross axis). From top to bottom, top for head, bottom for tail
  • Verticaldirection. up: indicates in the VerticalDirection (cross axis). From bottom to top, bottom for head, top for tail
Column
  • Verticaldirection. down: indicates in horizontal direction (cross axis). From left to right, left is the head, right is the tail
  • Textdirection. RTL: indicates in the horizontal direction (cross axis). From right to left, right is the head, left is the tail

The Stack

Replace LinearLayout (similar to Android LinearLayout, but why does it feel so FrameLayout?) The Stack allows the child widgets to be stacked so you can use the position of them relative to the upper, lower, left and right sides of the Stack. Stacks are based on the Absolute Positioning layout model of Web development. Used to position multiple Childs relative to the edge of their box, mostly used to overlap children in a simple manner

2.1 attributes

  • Alignment: Indicates the default value. AlignmentDirectional. TopStart (AlignmentDirectional (1.0, 1.0)). Indicates that children are ranked from the upper left corner
  • TextDirection: the direction of the text, the flow direction of the children
  • Overflow: Indicates whether overflows are clipped. Visible is not clipped. Overflow. The clip to lose
  • Fit:Tell children how to fill the Stack.
    • Stackfit. passthrough does not change the child constraint, which means children are as old as they are
    • StackFit. Expand the maximum possible space occupied by the child node, allowing the children size to expand to the Stack size
    • Stackfit. loose: Lets go of the width and height constraints on child nodes, allowing them to grow from 0 to maximum size

Three demo pictures

The demo code

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("row"),
        centerTitle: true,
      ),
      body: RowDemo(),
    );
  }
}

class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final _list = <Widget>[
      RaisedButton(
        disabledColor: Colors.red,
        child: Text(1 "son"),
      ),
      Text("儿子2"),
      Text("Son, 3"),
      Text("儿子4"),
      Text("Son, 5")];returnColumn( children: <Widget>[ SizedBox( height: 30, ), Container( color: Colors.grey, child: Row(// main axis (main axis) // Put children where Column axis // end: Tail, start, center, spaceBetween, space evenly placed between children, spaceAround, each child mainAxisAlignment: MainAxisAlignment.start, // The width of this Row is mainAxissize. Max by default, mainaxissize. min is the height of the children wrapper MainAxisSize. Max is the width of the parent Widget that fills the Row The children mainAxisSize: mainAxissize. Max attribute is invalid because it is wrapped with children mainAxisSize: mainaxissize. Max, // Cross axis // where to put children in Column axis // end: The tail, the start: the head, center: the middle, crossAxisAlignment: crossAxisAlignment. Start, / / the children in the order of the spindle textDirection: Textdirection. LTR, // Children: verticalDirection: verticalDirection. Down, children: _list, ), ), SizedBox( height: 30, ), SizedBox( width: 200, height: 200, child: Stack( alignment: AlignmentDirectional topStart, / / alignment: AlignmentDirectional (1.0, 1.0), fit: StackFit. Loose, overflow: Overflow.visible, children: <Widget>[ Container( color: Colors.black, height: 200, width: 200, ), Container( color: Colors.deepPurple, height: 100, width: 100, ), Container( color: Colors.green, height: 50, width: 50, ), ], )), ], ); }}Copy the code