本文主要介绍Flutter布局中的ListBody、ListView、CustomMultiChildLayout控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析。

1. ListBody

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

1.1 简介

ListBody是一个不常直接使用的控件,一般都会配合ListView或者Column等控件使用。ListBody的作用是按给定的轴方向,按照顺序排列子节点。

1.2 布局行为

在主轴上,子节点按照顺序进行布局,在交叉轴上,子节点尺寸会被拉伸,以适应交叉轴的区域。

在主轴上,给予子节点的空间必须是不受限制的(unlimited),使得子节点可以全部被容纳,ListBody不会去裁剪或者缩放其子节点。

1.3 继承关系

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

1.4 示例代码

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 源码解析

构造函数如下:

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

1.5.1 属性解析

mainAxis:排列的主轴方向。

reverse:是否反向。

1.5.2 源码

ListBody的布局代码非常简单,根据主轴的方向,对子节点依次排布。

当向右的时候,布局代码如下,向下的代码类似:

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;
}

当向左的时候,布局代码如下,向上的代码类似:

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;

向右或者向下的时候,布局代码很简单,依次去排列。当向左或者向上的时候,首先会去计算主轴所占的空间,然后再去计算每个节点的位置。

1.6 使用场景

笔者自己从未使用过这个控件,也想象不出场景,大家了解下有这么一个布局控件即可。

2. ListView

A scrollable, linear list of widgets.

2.1 简介

ListView是一个非常常用的控件,涉及到数据列表展示的,一般情况下都会选用该控件。ListView跟GridView相似,基本上是一个slivers里面只包含一个SliverList的CustomScrollView。

2.2 布局行为

ListView在主轴方向可以滚动,在交叉轴方向,则是填满ListView。

2.3 继承关系

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

看继承关系可知,这是一个组合控件。ListView跟GridView类似,都是继承自BoxScrollView。

2.4 示例代码

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"),
);
},
)

两个示例都是官方文档上的例子,第一个展示四行文字,第二个展示1000个item。

2.5 源码解析

构造函数如下:

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>[],
})

同时也提供了如下额外的三种构造方法,方便开发者使用。

ListView.builder
ListView.separated
ListView.custom

2.5.1 属性解析

ListView大部分属性同GridView,想了解的读者可以看一下之前所写的GridView相关的文章。这里只介绍一个属性

itemExtent:ListView在滚动方向上每个item所占的高度值。

2.5.2 源码

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

ListView标准构造布局代码如上所示,底层是用到的SliverList去实现的。ListView是一个slivers里面只包含一个SliverList的CustomScrollView。源码这块儿可以参考GridView,在此不做更多的说明。

2.6 使用场景

ListView使用场景太多了,一般涉及到列表展示的,一般都会选择ListView。

但是需要注意一点,ListView的标准构造函数适用于数目比较少的场景,如果数目比较多的话,最好使用ListView.builder

ListView的标准构造函数会将所有item一次性创建,而ListView.builder会创建滚动到屏幕上显示的item。

3. CustomMultiChildLayout

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

3.1 简介

之前单节点布局控件中介绍过一个类似的控件--CustomSingleChildLayout,都是通过delegate去实现自定义布局,只不过这次是多节点的自定义布局的控件,通过提供的delegate,可以实现控制节点的位置以及尺寸。

3.2 布局行为

CustomMultiChildLayout提供的delegate可以控制子节点的布局,具体在如下几点:

  • 可以决定每个子节点的布局约束条件;
  • 可以决定每个子节点的位置;
  • 可以决定自身的尺寸,但是自身的自身必须不能依赖子节点的尺寸。

可以看到,跟CustomSingleChildLayout的delegate提供的作用类似,只不过CustomMultiChildLayout的稍微会复杂点。

3.3 继承关系

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

3.4 示例代码

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: TestLayoutDelegate(),
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)),
),
],
),
)

上面的TestLayoutDelegate作用很简单,对子节点进行尺寸以及位置调整。可以看到,每一个子节点必须用一个LayoutId控件包裹起来,在delegate中可以对不同id的控件进行调整。

3.5 源码解析

构造函数如下:

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

3.5.1 属性解析

delegate:对子节点进行尺寸以及位置调整的delegate。

3.5.2 源码

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

CustomMultiChildLayout的布局代码很简单,调用delegate中的布局函数进行相关的操作,本身做的处理很少,在这里不做过多的解释。

3.6 使用场景

一些比较复杂的布局场景可以使用,但是有很多可替代的控件,使用起来也没有这么麻烦,大家还是按照自己熟练程度选择使用。

4. 后话

笔者建了一个Flutter学习相关的项目,Github地址,里面包含了笔者写的关于Flutter学习相关的一些文章,会定期更新,也会上传一些学习Demo,欢迎大家关注。

5. 参考

  1. ListBody class
  2. ListView class
  3. CustomMultiChildLayout class
  4. Working with long lists

Flutter 布局(十)- ListBody、ListView、CustomMultiChildLayout详解的更多相关文章

  1. flutter系列之:flutter中常用的ListView layout详解

    目录 简介 ListView详解 ListView中的特有属性 ListView的构造函数 ListView的使用 总结 简介 ListView是包含多个child组件的widget,在ListVie ...

  2. Flutter 布局(一)- Container详解

    本文主要介绍Flutter中非常常见的Container,列举了一些实际例子介绍如何使用. 1. 简介 A convenience widget that combines common painti ...

  3. Flex布局新旧混合写法详解(兼容微信)

    原文链接:https://www.usblog.cc/blog/post/justzhl/Flex布局新旧混合写法详解(兼容微信) flex是个非常好用的属性,如果说有什么可以完全代替 float 和 ...

  4. Java进阶(三十二) HttpClient使用详解

    Java进阶(三十二) HttpClient使用详解 Http协议的重要性相信不用我多说了,HttpClient相比传统JDK自带的URLConnection,增加了易用性和灵活性(具体区别,日后我们 ...

  5. “全栈2019”Java异常第十八章:Exception详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  6. “全栈2019”Java第二十八章:数组详解(上篇)

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  7. JSON详解+ C# String.Format格式说明+ C# ListView用法详解 很完整

    JSON详解 C# String.Format格式说明 C# ListView用法详解 很完整

  8. Java基础学习总结(33)——Java8 十大新特性详解

    Java8 十大新特性详解 本教程将Java8的新特新逐一列出,并将使用简单的代码示例来指导你如何使用默认接口方法,lambda表达式,方法引用以及多重Annotation,之后你将会学到最新的API ...

  9. Flex 布局新旧混合写法详解(兼容微信)

    flex 是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了(虽然现在还有很多不支持 flex 的浏览器).然而国内很多浏览器对 flex 的支持都 ...

随机推荐

  1. 对于python setup.py install安装的包如何卸载

    easy_install 安装 卸载命令 easy_install -m package-name setup.py安装 帮助你纪录安装细节方便你卸载 python setup.py install ...

  2. jquery-validae

    $(document).ready(function() { jQuery.validator.addMethod("realName", function(value, elem ...

  3. [视频]K8飞刀 一键免杀 IE神洞网马教程

    [视频]K8飞刀 一键免杀 IE神洞网马教程 https://pan.baidu.com/s/16ZrTs

  4. List通过HashSet去重

    //JAVA中//使用hashset去重复,set为重复的集合,可以通过new ArrayList(set)转换成list HashSet<HashMap<String, String&g ...

  5. 如何将页面上的数据导入excel中

    网上关于页面数据导入excel的文章很多,但是大部分都是关于 ActiveXObject 对象,可是ActiveXObject 对象是只支持IE的,可我连IE11也测试了,还是无法识别,又查到消息,好 ...

  6. SqlServer 循环建表、删除表、更新表

    常用于分库分表 1.批量删除 declare @outter int declare @inner int ) ) ) begin set @tablePrefix='BankPayOrder_'+c ...

  7. TCP/IP 笔记 - Internet地址结构

    连接到Internet中的每台设备至少都有一个IP地址,IP地址表示了流量的来源(好比别人要找你玩,需要知道你家的地址:网络中别人需要和你通信,也需要知道IP地址),且Internet中的IP地址必须 ...

  8. SQL优化经验总结

    一. 优化SQL步骤 1. 通过 show status和应用特点了解各种 SQL的执行频率    通过 SHOW STATUS 可以提供服务器状态信息,也可以使用 mysqladmin extend ...

  9. Hadoop项目实战-用户行为分析之应用概述(二)

    1.概述 本课程的视频教程地址:<项目整体概述> 本节给大家分享的主题如下图所示: 下面我开始为大家分享第二节的内容——<项目整体概述>,下面开始今天的分享内容. 2.内容 从 ...

  10. Django之模型层(单表操作)

    一.ORM简介 MVC和MTV框架中包含一个重要部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库. ORM是‘对象-关系- ...