Flutter自适应瀑布流

前言：在电商app经常会看到首页商品推荐的瀑布流，或者类似短视频app首页也是瀑布流，这些都是需要自适应的，才能给用户带来好的体验

（具体代码请联系我，当天会回复）

话不多说先上效果图:

根据效果图可以分为四步：

1.图片自适应

2.自适应标签

3.上拉刷新和下拉加载

4.底部的点赞按钮可以去掉或者自己修改样式，我这里使用的like_button库

注：本文使用的库：为啥这么多呢，因为我把图片缓存这样东西都加上了，单纯的瀑布流就用waterfall_flow

waterfall_flow: ^3.0.1
extended_image: any
extended_sliver: any
ff_annotation_route_library: any
http_client_helper: any
intl: any
like_button: any
loading_more_list: any
pull_to_refresh_notification: any
url_launcher: any

1.图片自适应：

Widget image = Stack(
  children: <Widget>[
    ExtendedImage.network(
      item.imageUrl,
      shape: BoxShape.rectangle,
      //clearMemoryCacheWhenDispose: true,
      border: Border.all(color: Colors.grey.withOpacity(0.4), width: 1.0),
      borderRadius: const BorderRadius.all(
        Radius.circular(10.0),
      ),
      loadStateChanged: (ExtendedImageState value) 
        if (value.extendedImageLoadState == LoadState.loading) 
          Widget loadingWidget = Container(
            alignment: Alignment.center,
            color: Colors.grey.withOpacity(0.8),
            child: CircularProgressIndicator(
              strokeWidth: 2.0,
              valueColor:
                  AlwaysStoppedAnimation<Color>(Theme.of(c).primaryColor),
            ),
          );
          if (!konwSized) 
            //todo: not work in web
            loadingWidget = AspectRatio(
              aspectRatio: 1.0,
              child: loadingWidget,
            );
          
          return loadingWidget;
         else if (value.extendedImageLoadState == LoadState.completed) 
          item.imageRawSize = Size(
              value.extendedImageInfo.image.width.toDouble(),
              value.extendedImageInfo.image.height.toDouble());
        
        return null;
      ,
    ),
    Positioned(
      top: 5.0,
      right: 5.0,
      child: Container(
        padding: const EdgeInsets.all(3.0),
        decoration: BoxDecoration(
          color: Colors.grey.withOpacity(0.6),
          border: Border.all(color: Colors.grey.withOpacity(0.4), width: 1.0),
          borderRadius: const BorderRadius.all(
            Radius.circular(5.0),
          ),
        ),
        child: Text(
          '$index + 1',
          textAlign: TextAlign.center,
          style: const TextStyle(fontSize: fontSize, color: Colors.white),
        ),
      ),
    )
  ],
);
if (konwSized) 
    image = AspectRatio(
      aspectRatio: item.imageSize.width / item.imageSize.height,
      child: image,
    );
   else if (item.imageRawSize != null) 
    image = AspectRatio(
      aspectRatio: item.imageRawSize.width / item.imageRawSize.height,
      child: image,
    );
  
 return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      image,
      const SizedBox(
        height: 5.0,
      ),
      buildTagsWidget(item),
      const SizedBox(
        height: 5.0,
      ),
      buildBottomWidget(item),
    ],
  );

2.自适应标签：

Widget buildTagsWidget(
  TuChongItem item, 
  int maxNum = 6,
) 
  const double fontSize = 12.0;
  return Wrap(
      runSpacing: 5.0,
      spacing: 5.0,
      children: item.tags.take(maxNum).map<Widget>((String tag) 
        final Color color = item.tagColors[item.tags.indexOf(tag)];
        return Container(
          padding: const EdgeInsets.all(3.0),
          decoration: BoxDecoration(
            color: color,
            border: Border.all(color: Colors.grey.withOpacity(0.4), width: 1.0),
            borderRadius: const BorderRadius.all(
              Radius.circular(5.0),
            ),
          ),
          child: Text(
            tag,
            textAlign: TextAlign.start,
            style: TextStyle(
                fontSize: fontSize,
                color: color.computeLuminance() < 0.5
                    ? Colors.white
                    : Colors.black),
          ),
        );
      ).toList());

3.上拉刷新和下拉加载

class PullToRefreshHeader extends StatelessWidget 
  const PullToRefreshHeader(this.info, this.lastRefreshTime, this.color);
  final PullToRefreshScrollNotificationInfo info;
  final DateTime lastRefreshTime;
  final Color color;
  @override
  Widget build(BuildContext context) 
    if (info == null) 
      return Container();
    
    String text = '';
    if (info.mode == RefreshIndicatorMode.armed) 
      text = 'Release to refresh';
     else if (info.mode == RefreshIndicatorMode.refresh ||
        info.mode == RefreshIndicatorMode.snap) 
      text = 'Loading...';
     else if (info.mode == RefreshIndicatorMode.done) 
      text = 'Refresh completed.';
     else if (info.mode == RefreshIndicatorMode.drag) 
      text = 'Pull to refresh';
     else if (info.mode == RefreshIndicatorMode.canceled) 
      text = 'Cancel refresh';
    

    final TextStyle ts = const TextStyle(
      color: Colors.grey,
    ).copyWith(fontSize: 13);

    final double dragOffset = info?.dragOffset ?? 0.0;

    final DateTime time = lastRefreshTime ?? DateTime.now();
    final double top = -hideHeight + dragOffset;
    return Container(
      height: dragOffset,
      color: color ?? Colors.transparent,
      //padding: EdgeInsets.only(top: dragOffset / 3),
      //padding: EdgeInsets.only(bottom: 5.0),
      child: Stack(
        children: <Widget>[
          Positioned(
            left: 0.0,
            right: 0.0,
            top: top,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Container(
                    alignment: Alignment.centerRight,
                    child: RefreshImage(top),
                    margin: const EdgeInsets.only(right: 12.0),
                  ),
                ),
                Column(
                  children: <Widget>[
                    Text(
                      text,
                      style: ts,
                    ),
                    Text(
                      'Last updated:' +
                          DateFormat('yyyy-MM-dd hh:mm').format(time),
                      style: ts.copyWith(fontSize: 12),
                    )
                  ],
                ),
                Expanded(
                  child: Container(),
                ),
              ],
            ),
          )
        ],
      ),
    );
  


class RefreshImage extends StatelessWidget 
  const RefreshImage(this.top);
  final double top;
  @override
  Widget build(BuildContext context) 
    const double imageSize = 40;
    return ExtendedImage.asset(
      Assets.assets_fluttercandies_grey_png,
      width: imageSize,
      height: imageSize,
      afterPaintImage: (Canvas canvas, Rect rect, ui.Image image, Paint paint) 
        final double imageHeight = image.height.toDouble();
        final double imageWidth = image.width.toDouble();
        final Size size = rect.size;
        final double y = (1 - min(top / (refreshHeight - hideHeight), 1)) *
            imageHeight;

        canvas.drawImageRect(
            image,
            Rect.fromLTWH(0.0, y, imageWidth, imageHeight - y),
            Rect.fromLTWH(rect.left, rect.top + y / imageHeight * size.height,
                size.width, (imageHeight - y) / imageHeight * size.height),
            Paint()
              ..colorFilter =
                  const ColorFilter.mode(Color(0xFFea5504), BlendMode.srcIn)
              ..isAntiAlias = false
              ..filterQuality = FilterQuality.low);

        //canvas.restore();
      ,
    );
  

4.底部的点赞按钮

LikeButton(
  size: 18.0,
  isLiked: item.isFavorite,
  likeCount: item.favorites,
  countBuilder: (int count, bool isLiked, String text) 
    final ColorSwatch<int> color =
        isLiked ? Colors.pinkAccent : Colors.grey;
    Widget result;
    if (count == 0) 
      result = Text(
        'love',
        style: TextStyle(color: color, fontSize: fontSize),
      );
     else 
      result = Text(
        count >= 1000 ? (count / 1000.0).toStringAsFixed(1) + 'k' : text,
        style: TextStyle(color: color, fontSize: fontSize),
      );
    
    return result;
  ,
  likeCountAnimationType: item.favorites < 1000
      ? LikeCountAnimationType.part
      : LikeCountAnimationType.none,
  onTap: (bool isLiked) 
    return onLikeButtonTap(isLiked, item);
  ,
)

这样自适应的瀑布流就完成了。

欢迎留言纠正 ~ 不妨给个点赞哈哈

我是阿T一个幽默的程序员 我们下期再见~

添加我为你的好友，领取源码以及Flutter学习资料~

加入我们吧，一起学习，一起进步~