Flutter入门并开发天气预报APP(5)——SingleChildScrollView、ListView和GridView

下面我们来介绍下Flutter中的滑动控件 SingleChildScrollView、列表 ListView和表格 GridView。

1. SingleChildScrollView

SingleChildScrollView类似于Android中的ScrollView，我使用的较浅，在我目前看来，他和ScrollView的唯一区别就是它还可以横向滚动。

我们先来看下他的定义：

SingleChildScrollView({
   
  this.scrollDirection = Axis.vertical, //滚动方向，默认是垂直方向
  this.reverse = false, 
  this.padding, 
  bool primary, 
  this.physics, 
  this.controller,
  this.child,
})

• scrollDirection：设定滚动的方向，可以设定Axis.vertical或者Axis.horizon；
• reverse：是否按照阅读方向的反方向滑动，emmm这个可能有点觉得莫名其妙，但是如阿拉伯语言地区，他们阅读和我国古时候一样是从右向左的，所以如果reverse为true，且滚动方向是水平滚动的话，如果系统时阿拉伯语等从右向左阅读的语言时，方向是从右向左的；
• padding：留白的大小，和Padding的用法一样，通过EdgeInsets来设定，具体可以看前几章将Flutter基础Widget；
• primary：指是否使用widget树中默认的PrimaryScrollController；当滑动方向为垂直方向（scrollDirection值为Axis.vertical）并且没有指定controller时，primary默认为true；
• physics：用于控制滚动方式，这个等会重点讲解；
• controller：用于滚动监听及控制；
• child：子Widget。

1.2 physics

这个参数是用于控制滚动方式，有几种参数：

• NeverScrollablePhysics：呈现不可滚动状态；
• BouncingScrollPhysics：当列表滑动结束时，会回弹列表，类似于iOS的列表滑动效果；

• ClampingScrollPhysics：滑动结束时会显示水波纹阴影，类似于Android的列表滑动效果；

• FixedExtentScrollPhysics：可以自己制作滑动效果，但是我也不会，所以在此不做解释?。

2. ListView

ListView可以沿一个方向上线性排布所有子组件（不仅局限于竖直方向）。

让我们来看下他的定义：

ListView({
   
  ...  
  //可滚动widget公共参数
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController controller<