Column vertical layout

  Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.vertical,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );
Copy the code

Children: collection of child controls

MainAxisAlignment: Vertical alignment of the main axis. The main axis is in vertical alignment

1. Center: center of the spindle 2. Start: starting point of the spindle 3. End: end of the spindle 4. Spaceinstituted: a evenly split space in the middle of the spindle, evenly split the space between end and endCopy the code

MainAxisSize: The value of space occupied by the main axis

Max: occupies the maximum space. Min: occupies the minimum spaceCopy the code

CrossAxisAlignment: a arrangement in which the lateral axes are horizontal in vertical alignment

1. Baseline: side axis is aligned with baseline 2. Center: side axis is displayed in the center 3. End: side axis is displayed at the end 4Copy the code

TextDirection: The arrangement of text

Textdirection. RTL: from right to leftCopy the code

VerticalDirection: Arrangement of child controls

1. Down: Layout from the upper left corner to the lower right corner. 2. Up: Layout from the lower right corner to the upper left cornerCopy the code

TextBaseline: the baseline of text

For details, see: Flutter: diagram of Row and Column

Padding

const Padding({ Key key, @required this.padding, Widget child, }) : assert(padding ! = null), super(key: key, child: child);Copy the code

Child: child control

When child is empty, a region with width left+right and height top+bottom is created; When the child is not empty, the Padding passes the layout constraint to the child, reducing the layout size of the child based on the Padding property. But the Padding adjusts itself to the size of the child setting the Padding property, creating a blank area around the child.Copy the code

Padding: EdgeInsets set the padding value

Stack

Stack({ Key key, this.alignment = AlignmentDirectional.topStart, this.textDirection, this.fit = StackFit.loose, this.overflow = Overflow.clip, this.clipBehavior = Clip.hardEdge, List<Widget> children = const <Widget>[], }) : assert(clipBehavior ! = null), super(key: key, children: children);Copy the code

alignment

This parameter determines how to position the child which is unpositioned (without using the tourists) or partially Positioned. The so-called partial positioning, here specifically refers to only positioning on a certain axis: left, right for the horizontal axis, top, bottom for the vertical axis, as long as contains a positioning attribute on the axis even if there is positioning on the axis.Copy the code

textDirection

Like the textDirection function of Row and Wrap, it is used to determine the reference frame of alignment, that is: LTR (textDirection. LTR); textDirection. LTR (textDirection. LTR); If the value of textDirection. RTL is textDirection. RTL, start indicates right and end indicates left.Copy the code

fit

This parameter is used to determine how unpositioned child components fit into the Stack size. Loose means the size to use the child component, stackfit. expand means to expand to the Stack size.Copy the code

overflow

This property determines how to display child components that exceed the Stack display space; When overflow is overflow. clip, the excess is clipped, but not when overflow is overflow. visible.Copy the code

code

class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Column( children: [ Padding( padding: const EdgeInsets.fromLTRB(0, 100, 0, 0), child: Container( color: Colors.blue, width: MediaQuery.of(context).size.width, height: 100, child: Stack( children: <Widget>[ Positioned( child: ClipPath( clipper:StartTimeClipper() , child: Container( color: Colors.red, child: GestureDetector( onTap: C-21 (){print(" click red ");},),)), toy (child: ClipPath(clipper: EndTimeClipper(), child: Container(color: Child: Colors, yellow, GestureDetector (onTap: () {print (" click on the yellow ");},),),),),),),),),,); } } class StartTimeClipper extends CustomClipper<Path> { @override Path getClip(Size size) { final path = Path(); Path. lineTo(size.width * 1/2, 0.0); path.lineTo(size.width * 1/4, size.height); Path. The lineTo (0.0, the size height); path.close(); return path; } @override bool shouldReclip(StartTimeClipper oldClipper) => false; } class EndTimeClipper extends CustomClipper<Path> { @override Path getClip(Size size) { final path = Path(); Path.moveto (sie.width * 1/2, 0.0); Path. LineTo (size, width, 0.0); path.lineTo(size.width, size.height); path.lineTo(size.width * 1/4, size.height); path.close(); return path; } @override bool shouldReclip(EndTimeClipper oldClipper) => false; }Copy the code