[fluent -- layout] flow layout (flow and wrap)

Flow

1. brief introduction

Flow Is a control that implements the flow layout algorithm . Streaming layout is a very common layout in the front end , But in general Flow Very few , Because it's too complicated , It will be used in many scenes Wrap .

2. attribute

delegate： influence Flow Specific layout FlowDelegate.

among FlowDelegate It includes the following methods ：

• getConstraintsForChild: Set each child The layout constraints of , Will cover the existing ;
• getSize： Set up Flow The size of the ;
• paintChildren：child The drawing control code of , You can adjust the size position , It's cumbersome to write ;
• shouldRepaint： Do you need to redraw ;
• shouldRelayout： Do you need to rearrange .

among , When we usually use it , It is usually used to paintChildren as well as shouldRepaint Two methods .

3. Use scenarios

Flow In some customized flow layouts , Available scenarios , But it's usually complicated to write , But the victory lies in flexibility and efficiency .

4. example

1. design sketch

2. Sample code

import 'package:flutter/material.dart';

void main() {
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
  const MyApp({
    Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
        title: 'Welcome to Flutter',

        home: Scaffold(
            appBar: AppBar(
              title: Text(' Fluid layout '),
            ),
            body: Center(
              child: Flow(
                delegate: TestFlowDelegate(margin: EdgeInsets.all(10.0)),
                children: <Widget>[
                  Container(width: 80.0, height:80.0, color: Colors.red,),
                  Container(width: 80.0, height:80.0, color: Colors.green,),
                  Container(width: 80.0, height:80.0, color: Colors.blue,),
                  Container(width: 80.0, height:80.0,  color: Colors.yellow,),
                  Container(width: 80.0, height:80.0, color: Colors.brown,),
                  Container(width: 80.0, height:80.0,  color: Colors.purple,),
                ],
              ),
            )
        )
    );
  }
}

class TestFlowDelegate extends FlowDelegate {
    
  EdgeInsets margin;

  TestFlowDelegate({
    this.margin = EdgeInsets.zero});

  double width = 0;
  double height = 0;

  @override
  void paintChildren(FlowPaintingContext context) {
    
    var x = margin.left;
    var y = margin.top;
    // Count every child widget The location of 
    for (int i = 0; i < context.childCount; i++) {
    
      var w = context.getChildSize(i)!.width + x + margin.right;
      if (w < context.size.width) {
    
        context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
        x = w + margin.left;
      } else {
    
        x = margin.left;
        y += context.getChildSize(i)!.height + margin.top + margin.bottom;
        // Sketcher widget( There is optimization )
        context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
        x += context.getChildSize(i)!.width + margin.left + margin.right;
      }
    }
  }

  @override
  Size getSize(BoxConstraints constraints) {
    
    //  Appoint Flow Size , For simplicity, let's make the width as large as possible , But the height is specified as 200,
    //  In actual development, we need to set it according to the specific width and height occupied by the child elements Flow size 
    return Size(double.infinity, 200.0);
  }

  @override
  bool shouldRepaint(FlowDelegate oldDelegate) {
    
    return oldDelegate != this;
  }
}

Wrap

1. brief introduction

Flow layout components , If the content width exceeds the screen width , It will be displayed in line automatically .

2. attribute

• direction： Spindle （mainAxis） The direction of , The default is horizontal .

• alignment： Alignment in spindle direction , The default is start.

• spacing： The spacing in the direction of the spindle .

• runAlignment：run The alignment of .run It can be understood as a new row or column , If it's a horizontal layout ,run It can be understood as a new line .

• runSpacing：run The distance between .

• crossAxisAlignment： Cross shaft （crossAxis） Alignment in the direction .

• textDirection： The text direction .

• verticalDirection： Defined children Order of placement , The default is down, see Flex Introduction to related properties .

3. Use scenarios

For some, you need to press the width or height , Give Way child Scene of auto wrap layout , have access to , however Wrap Satisfying scenarios ,Flow It can be realized , It's just a lot more complicated , But it will be more flexible and efficient .

4. example

1. design sketch

2. Code

import 'package:flutter/material.dart';

void main() {
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
  const MyApp({
    Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
        title: 'Welcome to Flutter',

        home: Scaffold(
            appBar: AppBar(
              title: Text(' Fluid layout '),
            ),
            body: Center(
              child: Wrap(
                spacing: 8.0,
                runSpacing: 4.0,
                children: <Widget>[
                  Chip(
                    avatar: CircleAvatar(
                        backgroundColor: Colors.green.shade300, child: new Text('AH', style: TextStyle(fontSize: 10.0),)),
                    label: Text('Kevin'),
                  ),

                  Chip(
                    avatar: CircleAvatar(
                        backgroundColor: Colors.green.shade300, child: new Text('ML', style: TextStyle(fontSize: 10.0),)),
                    label: Text('Lafayette'),
                  ),

                  Chip(
                    avatar: CircleAvatar(
                        backgroundColor: Colors.green.shade300, child: new Text('HM', style: TextStyle(fontSize: 10.0),)),
                    label: Text('Aaron'),
                  ),

                  Chip(
                    avatar: CircleAvatar(
                        backgroundColor: Colors.green.shade300, child: new Text('JL', style: TextStyle(fontSize: 10.0),)),
                    label: Text('Laurens'),
                  ),
                ],
              ),
            )
        )
    );
  }
}