组件实例

功能演示

Json数组循环

// 自定义Json数据
List listData = [
  {
    "title": "模拟Json数据1",
    "author": "Dart",
    "imageUrl": "http://sucai.suoluomei.cn/sucai_zs/images/20200226173153-2.jpg"
  },
  {
    "title": "模拟Json数据2",
    "author": "Dart",
    "imageUrl": "http://sucai.suoluomei.cn/sucai_zs/images/20200226173153-2.jpg"
  },
  {
    "title": "模拟Json数据3",
    "author": "Dart",
    "imageUrl": "http://sucai.suoluomei.cn/sucai_zs/images/20200226173153-2.jpg"
  }
];
class HomeContent extends StatelessWidget {
  //自定义方法
  List<Widget> getData() {
    var tempList = listData.map((value) {
      return ListTile(
        leading: Image.network(value["imageUrl"]),
        title: Text(value["title"]),
        subtitle: Text(value["author"]),
      );
    });
    return tempList.toList();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: this.getData(),
    );
  }
}

组件演示

Wrap()

循环自动换行

  Wrap({
    Key key,
    this.direction = Axis.horizontal,   //排列方向，默认水平方向排列
    this.alignment = WrapAlignment.start,  //子控件在主轴上的对齐方式
    this.spacing = 0.0,  //主轴上子控件中间的间距
    this.runAlignment = WrapAlignment.start,  //子控件在交叉轴上的对齐方式
    this.runSpacing = 0.0,  //交叉轴上子控件之间的间距
    this.crossAxisAlignment = WrapCrossAlignment.start,   //交叉轴上子控件的对齐方式
    this.textDirection,   //textDirection水平方向上子控件的起始位置
    this.verticalDirection = VerticalDirection.down,  //垂直方向上子控件的其实位置
    List<Widget> children = const <Widget>[],   //要显示的子控件集合
  })

                 Wrap(
            spacing: 10, //主轴上子控件的间距
            runSpacing: 10, //交叉轴上子控件之间的间距
            children: imgList.map((v) {
              return Container(
                width: 150,
                height: 150,
                child: Image.network(v),
                padding: EdgeInsets.all(5),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(4),
                  border: Border.all(
                    color: Colors.grey.shade300,
                  ),
                ),
              );
            }).toList(),
          ),