【Flutter】flutter可折叠流式布局

插件地址,详细用法可以看插件里的example

插件地址:https://github.com/JettChen12/flutter_foldable_wrap

演示

演示

简介

在flutter中,一般我们使用流式布局我们一个wrap套上就完事,wrap组件确实能解决一大部分布局需求。

但是,在产品开发到一定阶段后我们会遇到需要在流式布局后面添加可折叠组件的需求。

如抖音和小红书里的搜索历史下面的折叠功能

演示
演示

使用

使用flutter_foldable_wrap,我们先看下这个组件的参数

  const FoldableWrap(
      {super.key,
        required this.children,
        required this.childHeight,
        required this.foldLine,
        this.foldWidget,
        this.maxLines,
        this.isFold = false,
        this.spacing = 0,
        this.runSpacing = 0,
        this.maxChildCountOfOneLine = 0,
        this.onCallLineCount,
        this.foldWidgetAlwaysSetEnd = false,
        this.showTailFoldWidgetWhenUnFold = true})
  /// 子组件列表,折叠组件不要放在这里面
  final List<Widget> children;

  /// 折叠组件,当折叠组件不为 “null” 且当前需要折叠子组件时,会在折叠后子组件列表的尾部绘制该组件
  /// 当该组建为"null"时不展示该组件,将以空占位组件[SizedBox.shrink]替代,不会显示。
  final Widget? foldWidget;

  /// 折叠行数,也就是折叠后显示的行数,[foldLine]不能为负数,[foldLine]为 0 时不会绘制任何子组件
  final int foldLine;

  /// 外部控制是否折叠的参数,需要改变此参数时需要配合[setState]等刷新方法让当前组件重新渲染以达到重新布局的效果
  final bool isFold;

  /// 只显示多少行,限制行数展示
  /// [maxLines] 为 “null” 或者为 0 时,不限制行数
  /// 需要注意的是,[maxLines] 不为 “null” 或 0 时,当前组件只会显示[maxLines]的长度的子组件
  /// 并且,[maxLines]的展示优先级是大于[foldLine]的,当然,设置完[maxLines]是不会展示折叠组件的
  /// 所以希望展示折叠组件并且拥有折叠效果,需要将[maxLines]置为 “null” 或 0
  final int? maxLines;

  /// 水平间距
  final double spacing;

  /// 垂直间距
  final double runSpacing;

  /// 一行最大可显示多少个子组件
  /// 这个参数的意义是最大可显示多少数量的子组件,也就是每一行不会超过当前参数所设置的数量,
  /// 但是,需要注意的是,并不是说每一行是展示当前的参数的数量
  /// 例如[maxChildCountOfOneLine]为4,但子组件的宽度过于大的话,可能三个子组件便占满了一行,此时当前行只会展示3个组件。
  final int maxChildCountOfOneLine;

  /// 子组件的固定高度
  final double childHeight;

  /// 返回最终的行数
  final void Function(int)? onCallLineCount;

  /// 当前参数设置为 "true",折叠组件永远在行的末尾,不会跟在最后一个组件的后边,
  /// 如果折叠组件与最后一个组件的中间仍然有空隙,则会自动占满位置。
  final bool foldWidgetAlwaysSetEnd;

  /// 当未折叠状态时,尾部显示折叠组件
  final bool showTailFoldWidgetWhenUnFold;

马上上手

定义从组件外控制折叠的参数,只要改变这个布尔值就能改变折叠状态

bool _isFold = false;

定义所有显示子组件标题,当然这是个例子,你们可以从接口获取这个列表的内容

  static final List<String> _strList = [
    'Americano',
    'Cappuccino',
    'Espresso',
    'Latte',
    'Mocha',
    'Macchiato',
    'Flat White',
    'Cortado',
    'Irish Coffee',
    'Affogato'
  ];

定义子组件的样式

 Widget _buildChild(String title) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.amber,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Padding(
        padding: const EdgeInsets.all(5.0),
        child: Text(
          title,
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }

构建折叠组件

 Widget _buildFoldWidget() {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isFold = !_isFold;
        });
      },
      behavior: HitTestBehavior.opaque,
      child: Container(
          height: 40,
          decoration: BoxDecoration(
            color: Colors.amber,
            borderRadius: BorderRadius.circular(8),
          ),
          child: Padding(
            padding: const EdgeInsets.all(5.0),
            child: _isFold ? Icon(Icons.expand_more_outlined) : Icon(Icons.expand_less_outlined),
          )),
    );
  }

最后直接在build函数里使用FoldableWrap组件

FoldableWrap(
                  spacing: 10,
                  runSpacing: 10,
                  childHeight: 50,
                  foldWidget: _buildFoldWidget(),
                  isFold: _isFold,
                  foldLine: 2,
                  children: _strList.map((e) => _buildChild(e)).toList())

详细demo放在顶部的插件链接里。

posted @   漫游者杰特  阅读(10)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
历史上的今天:
2022-02-20 [Flutter] url_launcher实现打开外部应用
2022-02-20 [Flutter] 二维码生成和扫描功能实现
2022-02-20 [Flutter] 检测新版本功能实现
2022-02-20 [Flutter] 检测新版本封装类
点击右上角即可分享
微信分享提示