Flutter ListView列表组件，GridView组件 以及动态GridView,和Column组件 Row组件，Stack组件

Flutter列表组件

列表布局是我们项目开发中最常用的一种布局方法。Flutter中我们可以通过ListView来定义列表项。支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有一下分类：

1. 垂直列表
2. 垂直图文列表
3. 水平列表
4. 动态列表
5. 矩阵试列表

Flutter列表参数

名称	类型	说明
scrollDirection	Axis	Axis.horizontal  水平列表
		Axis.vertical 垂直列表
padding	EdgeInsetsGeometry	内边距
resolve	boolean	组件反向排序
children	List<Widget>	列表

Flutter基本coding

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView(

        children: <Widget>[
          ListTile(
            leading: Icon(Icons.phone),
            title: Text("设置title",style: TextStyle(fontSize: 20),),
            subtitle: Text("设置subtitle"),
          ),
          ListTile(
            leading: Icon(Icons.repeat),
            title: Text("设置title",style: TextStyle(fontSize: 20),),
            subtitle: Text("设置subtitle"),
          ),
          ListTile(
            leading: Icon(Icons.add),
            title: Text("设置title",style: TextStyle(fontSize: 20),),
            subtitle: Text("设置subtitle"),
          ),
        ],
      ),
      width: double.infinity,
      height: double.infinity,
      color: Colors.red,
    );
  }
}

运行效果:

纵向链表

List<Container> getContainer(){
    List<Container> result = new List<Container>();
    for(int i=0;i<50;i++){
      if(i%2==0){
        result.add(Container(
          //child: Text("Text",style: TextStyle(fontSize: 20),),
          width: double.infinity,
          color: Colors.yellow,
          height: 80,
        ));
      }else{
        result.add(Container(
          //child: Text("Text",style: TextStyle(fontSize: 20),),
          width: double.infinity,
          color: Colors.white,
          height: 80,
        ));
      }
    }

    return result;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView(
        children: getContainer(),
      ),
      width: double.infinity,
      height: double.infinity,
      color: Colors.red,
    );
  }

运行效果：

横向链表

List<Container> getContainer(){
    List<Container> result = new List<Container>();
    for(int i=0;i<50;i++){
      if(i%2==0){
        result.add(Container(
          //child: Text("Text",style: TextStyle(fontSize: 20),),
          color: Colors.yellow,
          width: 50,
          height: 30,
        ));
      }else{
        result.add(Container(
          //child: Text("Text",style: TextStyle(fontSize: 20),),
          color: Colors.white,
          width: 50,
          height: 30,
        ));
      }
    }

    return result;
  }


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: getContainer(),
      ),
      width: double.infinity,
      height: double.infinity,
      color: Colors.red,
    );
  }

运行效果：

GridView（网格组件）组件的常用参数

当数据量很大的时候用矩阵方式排列比较清晰，此时我们可以用网格列表组件GridView实现布局。

GridView创建网格列表有多种方式，下面我们主要介绍两种。

1.可以通过GridVIew.count  实现网格布局
2.通过GridView.builder  实现网络布局

常用属性：

名称	类型	说明
scrollDirection	Axis	滚动方法
padding	EdgeInsetsGeometry	内边距
resolve	boolean	组件反向排序
crossAxisSpacing	double	水平子Widget之间间距
mainAxisSpacing	double	垂直子Widget之间间距
crossAxisCount	int	一行的Widget数量
childAspectRatio	double	子Widget宽高比例
children		<Widget>[]
gridDelegate	SliverGridDelegateWithFixedCrossAxisCount(常用)， SliverGridDelegateWithMaxCrossAxisExtent	控制布局主要用在GridView.builder里面

coding：

class LayoutGridView extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      children: [
          Container(
            child: Text("GridView1"),
            color: Colors.red,
            ),
          Container(
            child: Text("GridView1"),
            color: Colors.pinkAccent,
            ),
          Container(
            child: Text("GridView1"),
            color: Colors.yellow,
            ),

      ],
      //padding: EdgeInsets.all(20),//全边距
      //crossAxisSpacing: 30,//左右设置边距
      mainAxisSpacing: 20,//上下边距
    );
  }
}

Column（垂直）组件

1 . Column垂直布局组件
 

属性	说明
mainAxisAlignment	主轴的排序方式，column主轴方向是垂直的方向
crossAxisAlignment	次轴的排序方式，交叉轴的布局方式，对于column来说就是水平方向的布局方式
children	组件子元素
textDirection	文字布局方向 默认值：没有，但在row的布局上是左到右的 1.TextDirection.ltr ，从左到右 2.TextDirection.rtl ,  从右到做布局
verticalDirection	就是字child的垂直布局方向，向上还是向下,默认值：VerticalDirection.down也就是从上到下的布局 1.VerticalDirection.up        从上向下布局。 2.VerticalDirection.down   反过来从下向上布局。
textBaseline	字体的基线  默认值：是空的 1.alphabetic ，用于对齐字母字符底部的水平线； 2.ideographic ，用于对齐表意字符的水平线

Container(
            child: Column(
              children: [
                Image.network("https://www.itying.com/images/flutter/1.png"),
                Text("Text Column",style: TextStyle(fontSize: 20),)
              ],
            )
          ),

Row（行）组件

Row是Flutter中常用的控件。一个让children在水平方向一次排列。如果Row控件不足的话。自身不带滚动的。

常用属性：

属性	说明
mainAxisAlignment	主轴的排序方式
crossAxisAlignment	次轴的排序方式
children	子布局元素

class LayoutRowView extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 450,
      height: 600,
      color: Colors.black,
      child: Container(
        width: 310,
        height: 540,
        color: Colors.pinkAccent,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,//主轴元素的排序方式（水平不仅中，X轴中主轴）
          crossAxisAlignment: CrossAxisAlignment.end, //次轴元素的排序方式
          children: [
            Container(
              color: Colors.yellow,
              width: 50,
              height: 110,
            ),
            Container(
              color: Colors.red,
              width: 50,
              height: 80,
            ),
            Container(
              color: Colors.blue,
              width: 50,
              height: 120,
            )
          ],
        ),
      )
    );
  }
}

Flutter Stack（堆） 组件

Stack 表示堆的意思，可以用Stack或者Stack结合Align或者Stack结合Positiond来实现页面的定位布局：

 

属性	说明
alignment	配置所有子元素的显示位置
children	子组件

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 320,
      height: 500,
      color: Colors.red,
      child: Stack(
        alignment: AlignmentDirectional.topStart,
        children: [
          Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
          Container(
            width: 100,
            height: 100,
            color: Colors.green,
          )
        ],
      ),
    );
  }
}

Flutter Align （对齐）组件

Stack组件中结合Align组件可以控制每个子元素的显示位置

属性	说明
alignment	配置所有子元素的显示位置
children	子组件

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 320,
      height: 500,
      color: Colors.red,
      child: Align(
            widthFactor: 20,
            heightFactor: 20,
            alignment: Alignment.topCenter,  //对齐方向
            child: Container(
              width: 80,
              height: 80,
              color: Colors.yellow,
            ),
          )
    );
  }
}

Flutter Positioned(定位布局)

Stack组件中结合Positioned组件也可以控制每个子元素的显示位置,有点像绝对布局

属性	说明
top	子元素距离顶部的距离
bottom	子元素距离底部的距离
left	子元素距离左侧距离
right	子元素距离右侧距离
child	子组件

left、top 、right、 bottom分别代表离Stack左、上、右、底四边的距离

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 320,
      height: 500,
      color: Colors.red,
      child:Stack(
        children: [
          Positioned(
            child:Container(
              width: 50,
              height: 50,
              color: Colors.yellow,
            ),
            right:10,
            top: 10,
          ),
          Positioned(
            child:Container(
              width: 50,
              height: 50,
              color: Colors.white,
            ),
            left:10,
            top: 50,
          ),
        ],
      )
    );
  }
}

运行效果：