Flutter layout (10)-Listbody, ListView, Custommultichildlayout detailed

This article mainly introduces the Listbody, ListView, custommultichildlayout control in Flutter layout, introduces its layout behavior and usage scene in detail, and analyzes the source code.

1. Listbody

A widget that is arranges its children sequentially along a given axis.

1.1 Introduction

Listbody is an infrequently used control that generally works with controls such as the ListView or column. The function of the listbody is to arrange the child nodes in the order given by the axis direction.

1.2 Layout behavior

On the spindle, the child nodes are laid out sequentially, and on the cross axis, the dimensions of the child nodes are stretched to accommodate the area of the cross axis.

On the spindle, the space given to the child node must be unrestricted (unlimited), so that the child nodes can be fully accommodated, listbody will not cut or scale its child nodes.

1.3 Inheritance Relations

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > ListBody

1.4 Sample Code

Flex(  direction: Axis.vertical,  children: <Widget>[    ListBody(      mainAxis: Axis.vertical,      reverse: false,      children: <Widget>[        Container(color: Colors.red, width: 50.0, height: 50.0,),        Container(color: Colors.yellow, width: 50.0, height: 50.0,),        Container(color: Colors.green, width: 50.0, height: 50.0,),        Container(color: Colors.blue, width: 50.0, height: 50.0,),        Container(color: Colors.black, width: 50.0, height: 50.0,),      ],  )],)

1.5 Source Code parsing

The constructor functions are as follows:

ListBody({  Key key,  this.mainAxis = Axis.vertical,  this.reverse = false,  List<Widget> children = const <Widget>[],})

1.5.1 Attribute parsing

Mainaxis: The direction of the spindle arranged.

Reverse: whether to reverse.

1.5.2 Source

Listbody Layout code is very simple, according to the direction of the spindle, the child nodes in sequence.

When the right, the layout code is as follows, the downward code resembles:

double mainAxisExtent = 0.0;RenderBox child = firstChild;switch (axisDirection) {case AxisDirection.right:  final BoxConstraints innerConstraints = new BoxConstraints.tightFor(height: constraints.maxHeight);  while (child != null) {    child.layout(innerConstraints, parentUsesSize: true);    final ListBodyParentData childParentData = child.parentData;    childParentData.offset = new Offset(mainAxisExtent, 0.0);    mainAxisExtent += child.size.width;    assert(child.parentData == childParentData);    child = childParentData.nextSibling;  }  size = constraints.constrain(new Size(mainAxisExtent, constraints.maxHeight));  break;}

When left, the layout code is as follows, with the upward code similar to the following:

double mainAxisExtent = 0.0;RenderBox child = firstChild;case AxisDirection.left:  final BoxConstraints innerConstraints = new BoxConstraints.tightFor(height: constraints.maxHeight);  while (child != null) {    child.layout(innerConstraints, parentUsesSize: true);    final ListBodyParentData childParentData = child.parentData;    mainAxisExtent += child.size.width;    assert(child.parentData == childParentData);    child = childParentData.nextSibling;  }  double position = 0.0;  child = firstChild;  while (child != null) {    final ListBodyParentData childParentData = child.parentData;    position += child.size.width;    childParentData.offset = new Offset(mainAxisExtent - position, 0.0);    assert(child.parentData == childParentData);    child = childParentData.nextSibling;  }  size = constraints.constrain(new Size(mainAxisExtent, constraints.maxHeight));  break;

To the right or down, the layout code is very simple, in turn, to arrange. When left or up, the space occupied by the spindle is calculated first, and then the position of each node is calculated.

1.6 Usage Scenarios

I have never used this control myself, nor can I imagine a scene where you can see a layout control.

2. ListView

A scrollable, linear list of widgets.

2.1 Introduction

A ListView is a very common control that involves a list of data that is typically selected. The ListView is similar to the GridView, basically a slivers contains only one sliverlist Customscrollview.

2.2 Layout behavior

The ListView can be scrolled in the direction of the spindle, and the ListView is filled in the direction of the cross axis.

2.3 Inheritance Relations

Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > ScrollView > BoxScrollView > ListView

Look at the inheritance relationship, this is a composite control. The ListView is similar to the GridView, and is inherited from the Boxscrollview.

2.4 Sample Code

ListView(  shrinkWrap: true,  padding: EdgeInsets.all(20.0),  children: <Widget>[    Text(‘I\‘m dedicating every day to you‘),    Text(‘Domestic life was never quite my style‘),    Text(‘When you smile, you knock me out, I fall apart‘),    Text(‘And I thought I was so smart‘),  ],)ListView.builder(  itemCount: 1000,  itemBuilder: (context, index) {    return ListTile(      title: Text("$index"),    );  },)

The two examples are examples of official documents, the first showing four lines of text, and the second showing 1000 item (s).

2.5 Source Code parsing

The constructor functions are as follows:

ListView({  Key key,  Axis scrollDirection = Axis.vertical,  bool reverse = false,  ScrollController controller,  bool primary,  ScrollPhysics physics,  bool shrinkWrap = false,  EdgeInsetsGeometry padding,  this.itemExtent,  bool addAutomaticKeepAlives = true,  bool addRepaintBoundaries = true,  double cacheExtent,  List<Widget> children = const <Widget>[],})

It also provides the following additional three construction methods, which are easy for developers to use.

ListView.builderListView.separatedListView.custom

2.5.1 Attribute parsing

ListView Most of the properties with the GridView, want to understand the reader can look at the previous written GridView related articles. Only one property is described here

itemextent: The height value that the ListView occupies for each item in the scrolling direction.

2.5.2 Source

@overrideWidget buildChildLayout(BuildContext context) {  if (itemExtent != null) {    return new SliverFixedExtentList(      delegate: childrenDelegate,      itemExtent: itemExtent,    );  }  return new SliverList(delegate: childrenDelegate);}

The ListView standard constructs the layout code as shown above, the bottom layer is the use of the sliverlist to implement. The ListView is a slivers containing only a sliverlist customscrollview. Source This piece can refer to the GridView, do not do more instructions here.

2.6 Usage Scenarios

ListView uses too many scenes, generally related to the list of the display, the general will choose the ListView.

However, it is important to note that the standard constructor of the ListView is suitable for scenarios where the number is less, if it is 数目比较多 best to use ListView.builder .

The standard constructor of the ListView creates all item once, and Listview.builder creates a scroll to the item displayed on the screen.

3. Custommultichildlayout

A widget that is uses a delegate to size and position multiple children.

3.1 Introduction

Before the single-node layout control introduced a similar control--customsinglechildlayout, all through delegate to implement a custom layout, but this time is a multi-node custom layout of the control, through the delegate provided, The position and dimensions of the control node can be achieved.

3.2 Layout behavior

The delegate provided by Custommultichildlayout can control the layout of child nodes, in the following points:

• Can determine the layout constraints of each child node;
• The position of each child node can be determined;
• You can determine the size of your own, but you must not rely on the size of the child node itself.

As you can see, Customsinglechildlayout's delegate provides a similar function, but custommultichildlayout is slightly more complex.

3.3 Inheritance Relations

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > CustomMultiChildLayout

3.4 Sample Code

Class Testlayoutdelegate extends Multichildlayoutdelegate {testlayoutdelegate ();  static const String title = ' title ';  static const String Description = ' description '; @override void performlayout (size size) {final boxconstraints constraints = new Boxconstraints (maxwidth:size.    width);    Final Size titlesize = layoutchild (title, constraints);    Positionchild (title, New Offset (0.0, 0.0));    Final double descriptiony = titlesize.height;    Layoutchild (description, constraints);  Positionchild (Description, New Offset (0.0, descriptiony)); } @override bool Shouldrelayout (testlayoutdelegate olddelegate) = false;} Container (width:200.0, height:100.0, Color:Colors.yellow, Child:custommultichildlayout (delegate:testlayoutde  Legate (), Children: <widget>[LayoutID (Id:TestLayoutDelegate.title, Child:new Text ("This is Title ", Style:textstyle (fontsize:20.0, Color:Colors.black)), LayoutID (Id:testlAyoutdelegate.description, Child:new Text ("This is description", Style:textstyle (fontsize:14.0, color : colors.red)),),],),

The Testlayoutdelegate function is simple, and the child nodes are resized and positioned. As you can see, the 每一个子节点必须用一个LayoutId控件包裹起来 controls for different IDs can be adjusted in delegate.

3.5 Source Code parsing

The constructor functions are as follows:

CustomMultiChildLayout({  Key key,  @required this.delegate,  List<Widget> children = const <Widget>[],})

3.5.1 Attribute parsing

delegate: The delegate of the size and position adjustment of the child nodes.

3.5.2 Source

@overridevoid performLayout() {  size = _getSize(constraints);  delegate._callPerformLayout(size, firstChild);}

Custommultichildlayout Layout code is very simple, call delegate in the layout function to do related operations, the processing of itself is very few, here do not do too much explanation.

3.6 Usage Scenarios

Some of the more complex layout scenarios can be used, but there are a lot of alternative controls that are not so cumbersome to use, and that people are using their own proficiency as a choice.

4. Something

The author has built a flutter study related projects, GitHub address, which contains the author of the Flutter study related to some of the articles, will be updated regularly, will also upload some learning demo, welcome attention.

5. Reference

1. Listbody class
2. ListView class
3. Custommultichildlayout class
4. Working with long lists

Flutter layout (10)-Listbody, ListView, Custommultichildlayout detailed