Flutter 中巴不得直接贴来的布局效果

---

家长里短

隔一段时间，本身总会有点新奇的想法，在编码的过程当中，到底要积累多少内容，或者说踩过多少坑，才能“顺风顺水”，若是你没有读过洋小洋其余文章的话，那仍是先说一，来了就不准走了。其实我也不是个专业的写手，可是我知道有不少人在一块儿共同的学习，可能之后会像掘金大佬同样，一篇一出就是几万字，剖析原理，那这些，咱慢慢来，以后我没准也写个什么5万字React.js终于开源了，也有老哥老妹看不过瘾，说是过短了，不过chixu没得事儿，我们持续的，持久的更新，作个持久Boy -- Do it

• 主题：本身研究Flutter 部件，手撸常见的布局效果
• 更新频次：持续、一直、always

进入正题

首先先来看一下效果，这也是笔者踩了些坑才写出如此简陋的效果，那至于踩了什么坑仍是建议看一下，这个 Flutter实际项目开发中踩坑大合集（持续更新..）

效果

此时正在看着的你，该说了这不简单吗，一个滚动的部件，搞定

• SingleChildScrollView

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

• ListView

ListView({
  ...  
  //可滚动widget公共参数
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController controller,
  bool primary,
  ScrollPhysics physics,
  EdgeInsetsGeometry padding,

  //ListView各个构造函数的共同参数 
  double itemExtent,
  bool shrinkWrap = false,
  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
  double cacheExtent,

  //子widget列表
  List<Widget> children = const <Widget>[],
})
复制代码

• GridView

GridView({
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController controller,
  bool primary,
  ScrollPhysics physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry padding,
  @required SliverGridDelegate gridDelegate, //控制子widget layout的委托
  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
  double cacheExtent,
  List<Widget> children = const <Widget>[],
})
复制代码

这不是那么多滚动的部件呢吗？但是我们要看下数据

final List listData = [
  {
    "date": "2019-12-05",
    "list": [
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      },
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      },
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      },
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      },
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      },
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      }
    ]
  },
  {
    "date": "2019-12-04",
    "list": [
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      }
    ]
  },
];
复制代码

也就是说这个数据是不肯定的，因此呢我们就来用一下大名鼎鼎的Sliver 这个东西很厉害的，能作出一些很炫酷的滚动动画，首先不太明白的，我们能够看文末是有一篇文章讲解，我认为蛮好

引包

常规操做，莫怪

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

复制代码

主要我们有用到图片的缓存因此就使用到第二个cached_network_image

搞数据

final List listData = [
  {
    "date": "2019-12-05",
    "list": [
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      },
    ]
  },
  ....................
];
复制代码

这里我们上边有看过

声明controller

ScrollController _controller = new ScrollController();
复制代码

这个仍是颇有必要的，由于咱们要有个统一化的滚动效果 为了不内存泄露，须要调用_controller.dispose

@override
  void dispose() {
    //为了不内存泄露，须要调用_controller.dispose
    _controller.dispose();
    super.dispose();
  }
复制代码

核心代码

Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverList(
            delegate: SliverChildBuilderDelegate(
          (context, index) => Container(
            child: Container(
              child: Column(
                children: <Widget>[
                  _dateTitle(listData[index]['date']),
                  Container(
                      decoration: BoxDecoration(
                          border: Border.all(width: 1, color: Colors.red)),
                      child: Wrap(
                          spacing: 8.0, // 主轴(水平)方向间距
                          runSpacing: 4.0, // 纵轴（垂直）方向间距
                          alignment: WrapAlignment.spaceEvenly, //沿主轴方向居中
                          children: (listData[index]['list'])
                              .map<Widget>((item) => Container(
                                    child: _onePic(item['pictureURL']),
                                  ))
                              .toList())),
                ],
              ),
            ),
          ),
          childCount: listData.length,
        ))
      ],
    );
  }
复制代码

// 日期
  Widget _dateTitle(String date) {
    return Container(
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 16),
        child: Text(
          date,
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
复制代码

// 每张图片
  Widget _onePic(url) {
    return Container(
      width: 200,
      height: 200,
      padding: EdgeInsets.all(5),
      child: CachedNetworkImage(
        imageUrl: url,
        fit: BoxFit.cover,
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
      ),
    );
  }
复制代码

那先这样简明扼要的聊一下，详细代码能够见滚动效果 已经有辣么多Demo 了

友情连接

• Flutter Packages 第三方包把玩Demos聚合地 就连接这一个吧，一个主题是使用第三方的包，一个是本身手写项目中常见的效果。同时也欢迎你来到个人github 转转，有个小项目在更新呦，是这个，截止目前已经8 颗星了，开森---

鸣谢

在Flutter中建立有意思的滚动效果 - Sliver系列 #18

---

-- End but thank you --