AI 助理
备案控制台
开发者社区 云计算 文章 正文

Flutter-自定义折叠流布局实现

2024-07-03 83
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Flutter-自定义折叠流布局实现

需求

在 Flutter 开发中，常常需要实现自定义布局以满足不同的需求。本文将介绍如何通过自定义组件实现一个折叠流布局，该组件能够显示一系列标签，并且在内容超出一定行数时，可以展开和收起。

效果

该折叠流布局可以显示一组标签，并在标签数量超过指定行数时提供展开和收起功能。初始状态下只显示限定行数的标签，并在最后一个位置显示展开按钮。点击展开按钮可以显示全部标签，再次点击展开按钮可以收起标签。

效果图如下：

实现思路

实现一个自定义的折叠流布局组件需要以下几个步骤：

  1. 创建一个 TagFlowWidget 组件，接受标签数据、最大行数和样式等参数。
  2. 在 TagFlowWidget 组件中使用 Flow 布局，并实现自定义的 FlowDelegate 来处理标签布局和展开收起逻辑。
  3. 在 FlowDelegate 中计算当前显示的行数，根据行数决定是否显示展开或收起按钮。

具体实现包括以下关键部分：

  • TagFlowWidget 组件的构建逻辑
  • 自定义 FlowDelegate 的布局和绘制逻辑
  • 展开和收起状态的管理

实现代码

下面是完整的实现代码，包括 TagFlowWidget 组件和 TagFlowDelegate 代理类。

import 'package:flutter/material.dart';

class TagFlowWidget extends StatefulWidget {
  final List<String> items;
  final int maxRows;
  final double spaceHorizontal;
  final double spaceVertical;
  final double itemHeight;
  final Color? itemBgColor;
  final BorderRadiusGeometry? borderRadius;
  final double? horizontalPadding;
  final TextStyle? itemStyle;

  const TagFlowWidget({
    Key? key,
    required this.items,
    required this.maxRows,
    required this.itemHeight,
    this.borderRadius,
    this.horizontalPadding,
    this.spaceHorizontal = 0,
    this.spaceVertical = 0,
    this.itemBgColor,
    this.itemStyle,
  }) : super(key: key);

  @override
  TagFlowWidgetState createState() => TagFlowWidgetState();
}

class TagFlowWidgetState extends State<TagFlowWidget> {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final maxWidth = constraints.maxWidth;
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: [
            Flow(
              delegate: TagFlowDelegate(
                maxRows: widget.maxRows,
                isExpanded: isExpanded,
                maxWidth: maxWidth,
                itemHeight: widget.itemHeight,
                spaceHorizontal: widget.spaceHorizontal,
                spaceVertical: widget.spaceVertical,
                itemCount: widget.items.length,
              ),
              children: [
                ...widget.items.map((item) {
                  return Container(
                      padding: EdgeInsets.symmetric(
                        horizontal: widget.horizontalPadding ?? 0,
                      ),
                      height: widget.itemHeight,
                      decoration: BoxDecoration(
                        color: widget.itemBgColor,
                        borderRadius: widget.borderRadius,
                      ),
                      child: Column(
                        mainAxisSize: MainAxisSize.max,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            item,
                            style: widget.itemStyle,

                          ),
                        ],
                      ));
                }).toList(),
                GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: () {
                    setState(() {
                      isExpanded = !isExpanded;
                    });
                  },
                  child: Container(
                    padding: EdgeInsets.symmetric(
                      horizontal: widget.horizontalPadding ?? 0,
                    ),
                    height: widget.itemHeight,
                    decoration: BoxDecoration(
                      color: widget.itemBgColor,
                      borderRadius: widget.borderRadius,
                    ),
                    child: Icon(
                      isExpanded
                          ? Icons.keyboard_arrow_up
                          : Icons.keyboard_arrow_down,
                    ),
                  ),
                ),
              ],
            ),
          ],
        );
      },
    );
  }
}

class TagFlowET {
  static int maxRowCount = 0;
}

class TagFlowDelegate extends FlowDelegate {
  final double maxWidth;
  final double spaceHorizontal;
  final double spaceVertical;
  int maxRows;
  final bool isExpanded;
  double height = 0;
  final double itemHeight;
  final int itemCount;

  TagFlowDelegate({
    required this.maxWidth,
    required this.itemCount,
    required this.spaceHorizontal,
    required this.spaceVertical,
    required this.maxRows,
    required this.isExpanded,
    required this.itemHeight,
  }) {
    if (!isExpanded) {
      TagFlowET.maxRowCount = maxRows;
    }
  }

  @override
  void paintChildren(FlowPaintingContext context) {
    TagFlowET.maxRowCount = _getMaxRowCount(context);
    if (maxRows >= TagFlowET.maxRowCount) {
      maxRows = TagFlowET.maxRowCount;
    }
    double x = 0;
    double y = 0;
    double rowHeight = 0;
    int rowCount = 1;
    for (int i = 0; i < context.childCount; i++) {
      final childSize = context.getChildSize(i)!;
      final arrowBtnSize = context.getChildSize(context.childCount - 1)!;

      if (rowCount >= maxRows &&
          !isExpanded &&
          (x + childSize.width + arrowBtnSize.width) >= maxWidth) {
        context.paintChild(
          context.childCount - 1,
          transform: Matrix4.translationValues(x, y, 0),
        );
        break;
      }

      if (x + childSize.width > maxWidth) {
        x = 0;
        y += rowHeight + spaceVertical;
        rowHeight = 0;
        rowCount++;
      }

      if (!(i == context.childCount - 1 && isExpanded && rowCount <= maxRows)) {
        context.paintChild(
          i,
          transform: Matrix4.translationValues(x, y, 0),
        );
      }

      x += childSize.width + spaceHorizontal;
      rowHeight = childSize.height;
    }
  }

  int _getMaxRowCount(FlowPaintingContext context) {
    double x = 0;
    var rowCount = 1;
    for (int i = 0; i < context.childCount; i++) {
      final childSize = context.getChildSize(i)!;
      final arrowSize = context.getChildSize(context.childCount - 1)!;
      if (x + childSize.width > maxWidth) {
        x = 0;
        rowCount++;
      }
      if (i == context.childCount - 1 &&
          (x + childSize.width + arrowSize.width) > maxWidth) {
        rowCount++;
      }
      x += childSize.width + spaceHorizontal;
    }
    return rowCount;
  }

  @override
  Size getSize(BoxConstraints constraints) {
    final height = (itemHeight * TagFlowET.maxRowCount) +
        (spaceVertical * (TagFlowET.maxRowCount - 1));
    return Size(constraints.maxWidth, height);
  }

  @override
  bool shouldRelayout(covariant FlowDelegate oldDelegate) {
    return oldDelegate != this ||
        (oldDelegate as TagFlowDelegate).isExpanded != isExpanded;
  }

  @override
  bool shouldRepaint(covariant FlowDelegate oldDelegate) {
    return oldDelegate != this ||
        (oldDelegate as TagFlowDelegate).isExpanded != isExpanded;
  }
}

具体使用

import 'package:flutter/material.dart';
import 'package:flutter_xy/widgets/xy_app_bar.dart';
import 'package:flutter_xy/xydemo/flow/tag_flow_view.dart';

class TagFlowPage extends StatelessWidget {
  const TagFlowPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: XYAppBar(
            title: '折叠标签',
            onBack: () {
              Navigator.pop(context);
            }),
        body: Container(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: [
                TagFlowWidget(
                  items: const [
                    '衣服',
                    'T恤宽松男',
                    '男鞋',
                    '香蕉苹果',
                    '休闲裤',
                    '牛仔裤',
                    '红薯',
                    '红薯',
                    '红薯',
                    '红薯',
                    '西红柿',
                    '更多商品',
                    '热销商品',
                    '最新商品',
                    '特价商品',
                    '限时特价商品',
                    '限时商品',
                    '热门商品',
                  ],
                  maxRows: 3,
                  spaceHorizontal: 8,
                  spaceVertical: 8,
                  itemHeight: 30,
                  horizontalPadding: 8,
                  itemBgColor: Colors.lightBlue.withAlpha(30),
                  itemStyle: const TextStyle(height: 1.1),
                  borderRadius: const BorderRadius.all(Radius.circular(8)),
                ),
              ],
            )),
      ),
    );
  }
}

通过上述代码，我们实现了一个自定义的折叠流布局组件 TagFlowWidget，并通过 TagFlowDelegate 来控制标签的布局和展开收起的逻辑。希望这篇文章对你在 Flutter 开发中的自定义布局实现有所帮助。


详情见：github.com/yixiaolunhui/flutter_xy


关键词：
Flutter自定义
Flutter布局
Flutter自定义折叠
Flutter折叠
一笑轮回~
目录
相关文章
lqj_本人
|
17天前
|
开发者 容器
Flutter&鸿蒙next 布局架构原理详解
本文详细介绍了 Flutter 中的主要布局方式，包括 Row、Column、Stack、Container、ListView 和 GridView 等布局组件的架构原理及使用场景。通过了解这些布局 Widget 的基本概念、关键属性和布局原理，开发者可以更高效地构建复杂的用户界面。此外，文章还提供了布局优化技巧，帮助提升应用性能。
lqj_本人
78 4
lqj_本人
|
15天前
|
UED 开发者 容器
Flutter&鸿蒙next 的 Sliver 实现自定义滚动效果
Flutter 提供了强大的滚动组件，如 ListView 和 GridView，但当需要更复杂的滚动效果时，Sliver 组件是一个强大的工具。本文介绍了如何使用 Sliver 实现自定义滚动效果，包括 SliverAppBar、SliverList 等常用组件的使用方法，以及通过 CustomScrollView 组合多个 Sliver 组件实现复杂布局的示例。通过具体代码示例，展示了如何实现带有可伸缩 AppBar 和可滚动列表的页面。
lqj_本人
79 1
lqj_本人
|
17天前
|
容器
深入理解 Flutter 鸿蒙版的 Stack 布局：适配屏幕与层叠样式布局
Flutter 的 Stack 布局组件允许你将多个子组件层叠在一起，实现复杂的界面效果。本文介绍了 Stack 的基本用法、核心概念（如子组件层叠、Positioned 组件和对齐属性），以及如何使用 MediaQuery 和 LayoutBuilder 实现响应式设计。通过示例展示了照片展示与文字描述、动态调整层叠布局等高级用法，帮助你构建更加精美和实用的 Flutter 应用。
lqj_本人
106 2
lqj_本人
|
17天前
Flutter 自定义组件继承与调用的高级使用方式
本文深入探讨了 Flutter 中自定义组件的高级使用方式，包括创建基本自定义组件、继承现有组件、使用 Mixins 和组合模式等。通过这些方法，您可以构建灵活、可重用且易于维护的 UI 组件，从而提升开发效率和代码质量。
lqj_本人
114 1
lqj_本人
|
17天前
|
前端开发 开发者
深入探索 Flutter 鸿蒙版的画笔使用与高级自定义动画
本文深入探讨了 Flutter 中的绘图功能，重点介绍了 CustomPainter 和 Canvas 的使用方法。通过示例代码，详细讲解了如何绘制自定义图形、设置 Paint 对象的属性以及实现高级自定义动画。内容涵盖基本绘图、动画基础、渐变动画和路径动画，帮助读者掌握 Flutter 绘图与动画的核心技巧。
lqj_本人
65 1
lqj_本人
|
17天前
|
Dart UED 开发者
Flutter&鸿蒙next中的按钮封装：自定义样式与交互
在Flutter应用开发中，按钮是用户界面的重要组成部分。Flutter提供了多种内置按钮组件，但有时这些样式无法满足特定设计需求。因此，封装一个自定义按钮组件变得尤为重要。自定义按钮组件可以确保应用中所有按钮的一致性、可维护性和可扩展性，同时提供更高的灵活性，支持自定义颜色、形状和点击事件。本文介绍了如何创建一个名为CustomButton的自定义按钮组件，并详细说明了其样式、形状、颜色和点击事件的处理方法。
lqj_本人
68 1
lqj_本人
|
17天前
|
Dart 搜索推荐 API
Flutter & 鸿蒙next版本：自定义对话框与表单验证的动态反馈与错误处理
在现代移动应用开发中，用户体验至关重要。本文探讨了如何在 Flutter 与鸿蒙操作系统（HarmonyOS）中创建自定义对话框，并结合表单验证实现动态反馈与错误处理，提升用户体验。通过自定义对话框和表单验证，开发者可以提供更加丰富和友好的交互体验，同时利用鸿蒙next版本拓展应用的受众范围。
lqj_本人
68 1
游客zi3qmblbcdexu
|
30天前
|
容器
Flutter&鸿蒙next 布局架构原理详解
Flutter&鸿蒙next 布局架构原理详解
游客zi3qmblbcdexu
70 2
明弟有理想
|
1月前
|
Android开发 开发者 容器
flutter:&UI布局 (六)
本文档介绍了Flutter中的UI布局方式，包括线性布局（如Column和Row）、非线性布局（如Stack、Flex、Positioned）以及Wrap布局等。通过具体示例代码展示了如何使用这些布局组件来构建灵活多变的用户界面，例如使用Column垂直排列文本、使用Stack叠加组件、以及利用Wrap实现自动换行的按钮布局等。
明弟有理想
62 1
你都不懂
|
2月前
|
前端开发 搜索推荐
Flutter中自定义气泡框效果的实现
Flutter中自定义气泡框效果的实现
你都不懂
84 3