从Flutter到原生开发-列表组件，图标组件，网格列表布局

Flutter布局-列表组件-ListView

ListView

分类

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

名称	类型	说明
scrollDirection	Axis	Axis.horizontal水平列表 Axis.vertical垂直列表(默认)
padding	EdgeInsetsGeometry	内边距
reverse	bool	组件反向排序
children	List	列表元素（可使用任意元素）

配合ListTile使用

dart

return ListView(
     scrollDirection: Axis.vertical,
     padding: EdgeInsets.all(10),
     // reverse: true,
     children: <Widget>[
       ListTile(
         leading: Icon(Icons.access_time),
         title: Text('title'),
         subtitle: Text("subtitle"),
         trailing: Icon(Icons.add_circle_outline),
       ),
       ListTile(
         title: Text('title'),
         subtitle: Text("subtitle"),
         trailing: Icon(Icons.add_circle_outline),
       ),
     ],
   );

配合其他元素使用

dart

ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Image.asset(
          'images/1.jpg',
          fit: BoxFit.cover,
        ),
        Image.asset(
          'images/1.jpg',
        ),
        Image.asset(
          'images/1.jpg',
        ),
        Image.asset(
          'images/1.jpg',
        ),
        Image.asset(
          'images/1.jpg',
        ),
      ],
    );

循环渲染列表1

dart

// 自定义方法
  List<Widget> _getData() {
    List<Widget> list = new List();
    for (var i = 0; i < 20; i++) {
      list.add(
        ListTile(
          title: Text("我是$i个列表"),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.vertical,
      children: _getData(),
    );
  }

循环渲染列表2

dart

// 自定义方法
List<Widget> _getData() {
  var tempList = listData.map((val) {
    return ListTile(
      leading: Image.network(
        val['images'],
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
      title: Text(val["title"]),
      subtitle: Text(val["author"]),
    );
  });
  return tempList.toList();
}

@override
Widget build(BuildContext context) {
  return ListView(
    scrollDirection: Axis.vertical,
    children: _getData(),
  );
}

ListView.builder

示例1

dart

class MyImages extends StatelessWidget {
  List list = new List();
  MyImages() {
    for (int i = 0; i < 20; i++) {
      list.add(
        ListTile(
          title: Text("woshi $i"),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: list.length,
      itemBuilder: (context, index) {
        return list[index];
      },
    );
  }
}

示例2

dart

import './data/listData.dart';

class MyImages extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: listData.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(listData[index]["title"]),
        );
      },
    );
  }
}

Flutter布局-网格列表布局-GridView

1. 通过GridView.count 实现网格布局
2. 通过GridView.builder 实现网格布局

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

GridView.count

示例1

dart

class MyGridView extends StatelessWidget {
  List<Widget> _getListData() {
    List<Widget> list = new List();
    for (int i = 0; i < 20; i++) {
      list.add(
        Container(
          alignment: Alignment.center,
          color: Colors.blue,
          child: Text(
            "这是一条数据$i",
            style: TextStyle(
              color: Colors.yellow,
              fontSize: 20,
            ),
          ),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2, //一行的widget 数量
      crossAxisSpacing: 10.0,
      mainAxisSpacing: 10.0,
      padding: EdgeInsets.all(10),
      children: _getListData(),
      childAspectRatio: 2,
    );
  }
}

示例2

dart

class MyGridView extends StatelessWidget {
  List<Widget> _getListData() {
    var templateList = listData.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value["images"]),
            Text(value["title"])
          ],
        ),
      );
    });
    return templateList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2, //一行的widget 数量
      crossAxisSpacing: 10.0,
      mainAxisSpacing: 10.0,
      padding: EdgeInsets.all(10),
      children: _getListData(),
      // childAspectRatio: 2,
    );
  }
}

GridView.builder

示例

dart

class MyGridView extends StatelessWidget {
  Widget _getListData(context, index) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.network(listData[index]["images"]),
          Text(listData[index]["title"])
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
      ),
      itemCount: listData.length,
      itemBuilder: _getListData,
    );
  }
}