【Flutter】【package】expandable折叠widget插件

最新推荐文章于 2024-05-23 10:00:26 发布
最新推荐文章于 2024-05-23 10:00:26 发布
阅读量875 收藏 2
点赞数
分类专栏： Flutter 文章标签： flutter android ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43444734/article/details/127238645
版权

在这里插入图片描述

package：expandable: ^5.0.1

pub 地址：https://pub.flutter-io.cn/packages/expandable

功能：

功能：

  1. 展开/关闭的控件

使用实例和代码：

import 'dart:math' as math;

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expandable Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State createState() {
    return MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Expandable Demo"),
      ),
      body:
          //设置默认主题，child 里面的expand 都会使用这个默认的主题，除非自己在定义
          ExpandableTheme(
        data: const ExpandableThemeData(
          iconColor: Colors.blue, //展开折叠图标的颜色
          useInkWell: true, //点击是否有水波纹的效果
        ),
        child: ListView(
          physics: const BouncingScrollPhysics(),
          children: <Widget>[
            //下面总共有三种效果展示
            Card1(),
            Card2(),
            Card3(),
          ],
        ),
      ),
    );
  }
}

const loremIpsum =
    "张九龄：感遇四首之一孤鸿海上来，池潢不敢顾。 侧见双翠鸟，巢在三珠树。 矫矫珍木巅，得无金丸惧。 美服患人指，高明逼神恶。 今我游冥冥，弋者何所慕。张九龄：感遇四首之二兰叶春";

class Card1 extends StatelessWidget {
  const Card1({super.key});
  @override
  Widget build(BuildContext context) {
    return ExpandableNotifier(
        child: Padding(
      padding: const EdgeInsets.all(10),
      child: Card(
        clipBehavior: Clip.antiAlias, //剪切
        child: Column(
          children: <Widget>[
            //定义了一个高度150 颜色是橘色的圆角色块
            SizedBox(
              height: 150,
              child: Container(
                decoration: const BoxDecoration(
                  color: Colors.orange,
                  shape: BoxShape.rectangle,
                ),
              ),
            ),
            // 自动化滚动，点击展开，会滚动到可以阅读位置
            ScrollOnExpand(
              scrollOnExpand: true,
              scrollOnCollapse: false,
              child: ExpandablePanel(
                theme: const ExpandableThemeData(
                  headerAlignment: ExpandablePanelHeaderAlignment.center,
                  tapBodyToCollapse: true,
                ),
                //头部widge
                header: Padding(
                    padding: EdgeInsets.all(10),
                    child: Text(
                      "ExpandablePanel",
                      style: Theme.of(context).textTheme.bodyText2,
                    )),
                //简洁性质的内容显示出全部的部分，或者是开头部分，这边是显示两行，超过的...
                collapsed: const Text(
                  loremIpsum,
                  softWrap: true,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
                //展开要显示的内容
                expanded: const Text(
                    '张九龄：感遇四首之一孤鸿海上来，池潢不敢顾。 侧见双翠鸟，巢在三珠树。 矫矫珍木巅，得无金丸惧。 美服患人指，高明逼神恶。 今我游冥冥，弋者何所慕。张九龄：感遇四首之二兰叶春张九龄：感遇四首之一孤鸿海上来，池潢不敢顾。 侧见双翠鸟，巢在三珠树。 矫矫珍木巅，得无金丸惧。 美服患人指，高明逼神恶。 今我游冥冥，弋者何所慕。张九龄：感遇四首之二兰叶春张九龄：感遇四首之一孤鸿海上来，池潢不敢顾。 侧见双翠鸟，巢在三珠树。 矫矫珍木巅，得无金丸惧。 美服患人指，高明逼神恶。 今我游冥冥，弋者何所慕。张九龄：感遇四首之二兰叶春张九龄：感遇四首之一孤鸿海上来，池潢不敢顾。 侧见双翠鸟，巢在三珠树。 矫矫珍木巅，得无金丸惧。 美服患人指，高明逼神恶。 今我游冥冥，弋者何所慕。张九龄：感遇四首之二兰叶春'),

                //创建展开后的内widget
                builder: (_, collapsed, expanded) {
                  return Padding(
                    padding:
                        const EdgeInsets.only(left: 10, right: 10, bottom: 10),
                    child: Expandable(
                      collapsed: collapsed,
                      expanded: expanded,
                      //下面的不起作用
                      // theme: const ExpandableThemeData(
                      //     crossFadePoint: 0, iconColor: Colors.pink),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    ));
  }
}

class Card2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    buildImg(Color color, double height) {
      return SizedBox(
          height: height,
          child: Container(
            decoration: BoxDecoration(
              color: color,
              shape: BoxShape.rectangle,
            ),
          ));
    }

    buildCollapsed1() {
      return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(10),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    "Expandable",
                    style: Theme.of(context).textTheme.bodyText1,
                  ),
                ],
              ),
            ),
          ]);
    }

    buildCollapsed2() {
      return buildImg(Colors.lightGreenAccent, 150);
    }

    buildCollapsed3() {
      return Container();
    }

    buildExpanded1() {
      return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(10),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    "Expandable",
                    style: Theme.of(context).textTheme.bodyText1,
                  ),
                  Text(
                    "3 Expandable widgets",
                    style: Theme.of(context).textTheme.caption,
                  ),
                ],
              ),
            ),
          ]);
    }

    buildExpanded2() {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            children: <Widget>[
              Expanded(child: buildImg(Colors.lightGreenAccent, 100)),
              Expanded(child: buildImg(Colors.orange, 100)),
            ],
          ),
          Row(
            children: <Widget>[
              Expanded(child: buildImg(Colors.lightBlue, 100)),
              Expanded(child: buildImg(Colors.cyan, 100)),
            ],
          ),
        ],
      );
    }

    buildExpanded3() {
      return Padding(
        padding: EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              loremIpsum,
              softWrap: true,
            ),
          ],
        ),
      );
    }

    return ExpandableNotifier(
        child: Padding(
      padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10),
      child: ScrollOnExpand(
        child: Card(
          clipBehavior: Clip.antiAlias,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              //Expandable 基础Expand widget
              Expandable(
                //ui 上面显示的是标题，展开之后显示标题和简介
                collapsed: buildCollapsed1(),
                expanded: buildExpanded1(),
              ),
              Expandable(
                collapsed: buildCollapsed2(),
                expanded: buildExpanded2(),
              ),

              Expandable(
                collapsed: buildCollapsed3(),
                expanded: buildExpanded3(),
              ),
              Divider(
                height: 1,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Builder(
                    builder: (context) {
                      //控制器可以控制展开和折叠
                      var controller =
                          ExpandableController.of(context, required: true)!;
                      return TextButton(
                        child: Text(
                          controller.expanded ? "折叠" : "展开",
                          style: Theme.of(context)
                              .textTheme
                              .button!
                              .copyWith(color: Colors.deepPurple),
                        ),
                        onPressed: () {
                          controller.toggle();
                        },
                      );
                    },
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    ));
  }
}

class Card3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    buildItem(String label) {
      return Padding(
        padding: const EdgeInsets.all(10.0),
        child: Text(label),
      );
    }

    buildList() {
      return Column(
        children: <Widget>[
          for (var i in [1, 2, 3, 4]) buildItem("数据 ${i}"),
        ],
      );
    }

    return ExpandableNotifier(
        child: Padding(
      padding: const EdgeInsets.all(10),
      child: ScrollOnExpand(
        child: Card(
          clipBehavior: Clip.antiAlias,
          child: ExpandablePanel(
            theme: const ExpandableThemeData(
              headerAlignment: ExpandablePanelHeaderAlignment.center,
              tapBodyToExpand: true,
              tapBodyToCollapse: true,
              hasIcon: false,
            ),
            header: Container(
              color: Colors.indigoAccent,
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: Row(
                  children: [
                    //展开和收起的widget
                    ExpandableIcon(
                      theme: const ExpandableThemeData(
                        expandIcon: Icons.arrow_right,
                        collapseIcon: Icons.arrow_drop_down,
                        iconColor: Colors.white,
                        iconSize: 28.0,
                        iconRotationAngle: math.pi / 2,
                        iconPadding: EdgeInsets.only(right: 5),
                        hasIcon: false,
                      ),
                    ),
                    Expanded(
                      child: Text(
                        "列表数据",
                        style: Theme.of(context)
                            .textTheme
                            .bodyText1!
                            .copyWith(color: Colors.white),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            collapsed: Container(),
            expanded: buildList(),
          ),
        ),
      ),
    ));
  }
}

截图：

在这里插入图片描述

Cartoon SuperMan
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flutter 视频播放插件
08-17
flutter 视频播放插件。适用于flutter开发
flutter-expandable:Flutter小部件，可由用户展开或折叠
05-02
可扩展的 Flutter小部件，可由用户展开或折叠。 介绍 该库有助于实现Material Design规定的可扩展行为： 请勿将Expandable与混淆。 ExpansionPanel是Flutter材质库的一部分，仅可在ExpansionPanelList中使用，不能用于制作其他小部件，例如可扩展Card部件。 用法 制作可扩展小部件的最简单方法是使用ExpandablePanel ： class ArticleWidget extends StatelessWidget { final Article article; ArticleWidget ( this .article); @override Widget build ( BuildContext context) { return ExpandablePanel ( header
Flutter 开源库推荐：Expandable - 动态可扩展的界面组件
最新发布
gitblog_00089的博客
05-23 337
Flutter 开源库推荐：Expandable - 动态可扩展的界面组件 项目地址:https://gitcode.com/aryzhov/flutter-expandable 在 Flutter 的世界中，构建富有交互性的 UI 是开发者的重要任务之一。今天，我们向您推荐一个强大的开源库——Expandable，它允许您轻松地创建可展开和折叠的组件，为您的应用增加更多动态效果。 项目介绍 Ex...
【Flutter】自定义折叠组件
weixin_45731252的博客
09-05 1767
Flutter自定义折叠组件
Flutter Widgets 之 Expanded和Flexible
Dream It Possible
06-05 2868
Expanded和Flexible是控制Row、Column、Flex的子控件如何布局的控件，Expanded和Flexible可以扩张填满主轴剩余空间，如何确认主轴和交叉轴可以查看Flutter Widgets 之 Row和Column，这篇文章详细介绍了主轴和交叉轴。首先看一下Expanded和Flexible的构造函数：区别如下 - Expanded 继承自Flexible。 - Flexible 中参数默认是，而Expanded固定为。因此如果在使用Flexible时，设置为，Flexible和Ex
Flutter ExpansionTile 折叠组件的使用
半身风雪
11-11 1522
在flutter 中，为我们提供了一个可折叠的组件 ExpansionTile ，而且此组件还比较容易扩展，本篇文章将记录扩展的一种，card 可折叠的名片列表。
Flutter 中的 ExpansionPanel：示例指南
分享身边生活经验blog
10-12 1271
当您使用ExpansionPanelwith 时ListTile，您将获得一个用户友好的可扩展列表，如我们在前面的示例中所见。您可以根据个人喜好或应用主题对其进行自定义。例如，您更改元素的背景颜色，如下所示：//.....//...);您可以更改可扩展列表的分隔线颜色，如以下代码片段所示：//....//...也可以为标题设置自定义填充。看下面的例子：//....//...以下_renderSteps方法实现使用上述参数应用多个 UI 自定义。isExpanded;});
flutter摄像头插件
08-17
本文将深入探讨“flutter摄像头插件”的使用，帮助开发者更好地理解和利用这一功能，实现移动应用中的相机功能。 标题“flutter摄像头插件”指的是在Flutter应用中集成摄像头功能的一个软件组件或库。Flutter本身...
Flutter 轮播图插件
01-13
Flutter 提供了多种插件来帮助开发者轻松创建轮播图，其中 `flutter_swiper` 是一个广泛使用的插件。本文将详细介绍如何在 Flutter 中集成并使用轮播图插件，并探讨相关接口和模型类的设计。 ### 一、Flutter ...
flutter 常用插件整理附加使用实例
03-27
本文将深入探讨一些常用的Flutter插件，并提供实际的使用示例，帮助你提升Flutter应用的开发效率。 1. **网络请求库：http** `http`插件是Flutter中进行HTTP请求的标准库，支持GET、POST等多种HTTP方法。例如，...
flutter 解决ExpandableText组件三个点调整颜色问题
smileKH的博客
04-23 476
最近写flutter项目，在使用ExpandableText时解决了一些问题，下面是解决方案，希望帮助到大家。这就是Flutter解决ExpandableText组件三个点调整颜色问题，虽然不是什么大问题，先记录下来，希望能帮助到你！
flutter-ExpandableList的使用
zhakesipailuo的博客
07-16 2305
先上效果图： 展开之前： header的内容： 展开之后： header中的内容： 具体的使用很简单，直接上代码： class ExpandableList extends StatefulWidget { @override _ExpandableListState createState() => _ExpandableListState(); } class _Expan...
Flutter 中 Flexible、Expanded、Spacer 的使用技巧详解 _ Flutter Widgets(1)
2401_84149256的博客
04-17 1200
由于题目很多整理答案的工作量太大，所以仅限于提供知识点，详细的很多问题和参考答案我都整理成了 PDF文件《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！图片转存中…(img-qghHXni2-1713309126104)][外链图片转存中…(img-W4ZXUd2j-1713309126105)]《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！
Flutter 组件封装：文字折叠 NExpandText
Androiddddd的博客
03-23 568
然后做尺寸判断进行处理，目前最优的方法。如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。
Flutter - 折叠面板
iotjin的专栏
04-26 1067
flutter 自定义折叠组件。
flutter开发之组件大全
01-19
flutter是谷歌的移动ui框架，可以快速在ios和android上构建高质量的用户界面。本课程会全面细致的讲解flutter各个组件的用法。
Flutter开发：折叠效果对应的组件使用
软贱开发攻城狮
12-06 3382
前言 在Flutter开发中，熟练使用各种组件是必备技能，尤其是实际开发需求是错综复杂的，各种奇葩需求，必须要对常用的组件使用要很熟悉才行，那么本文就来分享一个在Flutter开发中比较常用的效果，表格折叠，或者说是对于table列表进行折叠的效果，这也是基于移动端开发的特点。接下来就来介绍一下关于Flutter开发中折叠组件的使用以及折叠效果实现的操作。 折叠效果 Flutter中的折叠效果主要是通过使用ExpansionPanel，结合使用headerBuilder和body来实现。
Flutter学习之旅 - 页面布局Stack层叠组件
yasinawolaopo的博客
05-05 506
主要是Stack组件的使用和结合Align一些组件的使用
Flutter 折叠控件
05-22
Flutter 中折叠控件可以使用 ExpansionPanel 和 ExpansionPanelList 实现。ExpansionPanel 可以定义一个折叠面板，而 ExpansionPanelList 可以多个 ExpansionPanel 组合成一个列表。 下面是一个简单的例子，展示如何使用 ExpansionPanelList 实现折叠控件： ```dart import 'package:flutter/material.dart'; class MyExpansionPanel extends StatefulWidget { @override _MyExpansionPanelState createState() => _MyExpansionPanelState(); } class _MyExpansionPanelState extends State<MyExpansionPanel> { List<Item> _items = <Item>[ Item( headerValue: 'Header 1', expandedValue: 'Expanded 1', ), Item( headerValue: 'Header 2', expandedValue: 'Expanded 2', ), Item( headerValue: 'Header 3', expandedValue: 'Expanded 3', ), ]; @override Widget build(BuildContext context) { return SingleChildScrollView( child: ExpansionPanelList( expansionCallback: (int index, bool isExpanded) { setState(() { _items[index].isExpanded = !isExpanded; }); }, children: _items.map<ExpansionPanel>((Item item) { return ExpansionPanel( headerBuilder: (BuildContext context, bool isExpanded) { return ListTile( title: Text(item.headerValue), ); }, body: ListTile( title: Text(item.expandedValue), ), isExpanded: item.isExpanded, ); }).toList(), ), ); } } class Item { Item({ this.expandedValue, this.headerValue, this.isExpanded = false, }); String expandedValue; String headerValue; bool isExpanded; } ``` 在上面的例子中，我们创建了一个 Item 类，表示每个折叠面板的内容。然后，我们创建了一个 List<Item>，包含几个 Item 对象。接着，我们将这些 Item 对象映射为 ExpansionPanel 对象，并将它们放在一个 ExpansionPanelList 中。 在 ExpansionPanelList 中，我们需要实现一个 expansionCallback 方法，这个方法会在用户点击折叠面板时被调用。在这个方法中，我们可以改变每个 Item 对象的 isExpanded 属性，从而控制折叠面板的展开和关闭。 最后，我们把 ExpansionPanelList 放在一个 SingleChildScrollView 中，这是为了让折叠控件可以滚动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值