flutter 之Container、Column、ListView分析

d性布局允许子组件按照一定比例来分配父容器空间

Flex组件和Row、Column属性主要的区别就是多一个direction。

当direction的值为Axishorizontal的时候，则是Row。

当direction的值为Axisvertical的时候，则是Column。

它们之中都有主轴（MainAxis）和交叉轴（CrossAxis）的概念：

Row可以沿水平方向排列其子widget。定义如下：

示例1 - 基本使用

示例2 - 基线对齐

基线是英文字母X的下端两点连成的一条线

示例3 - 水平方向包裹

Column可以沿垂直方向排列其子widget。定义如下：

Column 基本使用 示例

再看一个示例

运行效果如下：

我们发现文本并没有居中？

解释：

实际上，Row和Column都只会在主轴方向占用尽可能大的空间，而交叉轴的长度则取决于他们最大子元素的长度。如果我们想让本例中的两个文本控件在整个手机屏幕中间对齐，我们有两种方法：

运行效果如下：

如果Row里面嵌套Row，或者Column里面再嵌套Column，那么只有最外面的Row或Column会占用尽可能大的空间，里面Row或Column所占用的空间为实际大小，下面以Column为例说明

如果要让里面的Column占满外部Column，可以使用Expanded 组件：

Tags： flutter

[TOC]

容器组件Container包含一个子widget，自身具备alignment、padding等属性，方便布局过程中摆放child。

常用属性

组件Image显示图像的组件，有多种构造函数：

常用属性

BoxFit取值及描述

文本组件Text负责显示文本和定义显示样式。

常用属性

富文本组件RichText使用多个不同风格的widget显示文本，要显示的文本使用TextSpan对象树来描述，每个对象都有一个用于该子树的关联样式。文本可能多行，也可能显示在同一行，取决于布局约束。

常用属性

图标组件Icon展示图标的组件，该组件不可交互，要实现交互图标，可以考虑使用IconButton组件。图标相关组件有以下几个：

图标按钮组件IconButton是基于Meterial Design风格的组件，可以响应按下的事件，并且按下时带水波纹效果。如果它的onPressed回调函数为null，那么这个按钮处于禁用状态，并且不可按下。

凸起按钮组件RaisedButton是Material Design中的button，一个凸起的材质矩形按钮，它可以响应按下事件，并且按下时会带一个触摸效果。

列表是最常见的需求。在Flutter中，用ListView来显示列表项，支持垂直和水平方向展示，通过一个属性我们就可以控制其方向，列表有以下几类：

基础列表组件为ListView组件。

水平列表组件即为水平方向排列的组件，列表内部元素以水平方向排列。把ListView组件的scrollDirection属性设置为Axishorizontal即可。

当列表的数据项非常多时，需要使用长列表，比如淘宝后台订单列表、手机通讯录等，这些列表项数据很多。长列表也是使用ListView作为基础组件，只不过需要添加一个列表项构造器itemBuilder。

网格布局组件GridView可以实现多行多列布局的应用场景。使用GridView创建网格列表有多种方式：

表单是一个包含表单元素的区域。表单元素允许用户输入内容，比如文本域，下拉列表，单选框，复选框等。常见应用场景有：登录、注册、输入信息等。表单里有两个重要的组件，一个是Form组件，用来左整个表单提交使用的；另一个是TextFormField组件，用来做用户输入的。

didChangeAppLifecycleState App生命周期发生变化

AppLifecycleStateinactive -> AppLifecycleStatepaused

AppLifecycleStateinactive -> AppLifecycleStateresumed -> build

StatelessWidget 的生命周期只有一个，就是 build

build 是用来创建 Widget 的，但 因为 build 在每次界面刷新的时候都会调用，所以不要在 build 里写业务逻辑，可以把业务逻辑写到你的 StatelessWidget 的构造函数里 。

因此生命周期很简单

依次为

这个方法在一帧的最后调用，并且只调用一次,使用这个方法就可以在判断渲染完成，并获取到元素的大小。

附上开发环境：

折线图是一个 Widget，和普通 Widget一样声明即可：

LineChart 的构造参数是一个 LineChartData，其属性如下：

配置了三条线，所以 lineBarsData 对应的数组有三个元素。

看下 LineChartBarData 属性：

图表四个方向的边框，有总显示开关，决定是否显示和隐藏所有，如果开启，又想隐藏个别边框，需要设置透明色。

FlBorderData 对应边框信息，有两个参数， show 就是显示与隐藏的边框， border 是边框数据。

FlTitlesData 可以配置4条坐标轴，也有一个总开关，如果要显示坐标轴，就设为 true ，然后配置对应位置的数据：

每个位置对应的是 SideTitles ，设置如下：

标题是显示在坐标轴后面的文字标题，每个轴对应一个。

附上源码

对于初学flutter的朋友来说，要知道，flutter的UI万物皆Widget。

flutter所写的页面的结构可以被看成套娃，一层套一层，一层套一层，一层套一层。。。。。。

Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。

Text ： 该 widget 可让创建一个带格式的文本。

Row 、 Column ： 这些具有d性空间的布局类Widget可让您在水平（ Row ）和垂直（ Column ）方向上创建灵活的布局。

Stack ：取代线性布局 (和Android中的LinearLayout相似)，Stack允许子 widget 堆叠， 你可以使用 Positioned 来定位他们相对于 Stack 的上下左右四条边的位置。

Container ： Container 可让您创建矩形视觉元素。 您可以为 Container 装饰一个 BoxDecoration , 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container 可以使用矩阵在三维空间中对其进行变换。

具体的演示见我另外的博客

有一部分Widget都有一个 child 属性，用于容纳唯一的子Widget。

例如：Container、Center、Padding、Align等Widget。

还有一部分Widget允许存在多个子Widget，用 children 作为属性。

例如：Row、Column、Stack等Widget。

在StatefulWidget调用createState之后，框架将新的状态插入树种，然后调用状态对象的initState。子类化State可以重写initState，以完成仅需要一次执行的工作。当然在initState的实现中需要调用superinitState

当一个状态对象不再需要时，框架调用状态对象的dispose。也可以通过覆盖dispose方法来执行清理工作。

OVER~

以上就是关于flutter 之Container、Column、ListView分析全部的内容，包括:flutter 之Container、Column、ListView分析、Flutter入门这一篇效率文章就够了、Flutter 之 d性布局 (Row、Column) (十一)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！