Flutter - 折叠面板

demo 地址: https://github.com/iotjin/jh_flutter_demo
代码不定时更新,请前往github查看最新代码

flutter 自定义折叠组件

  • 支持三种类型和两种展示效果
  • 可自定义title和被折叠的内容

效果图

请添加图片描述

请添加图片描述

示例

import 'package:flutter/material.dart';
import '/jh_common/widgets/jh_collapse_view.dart';
import '/project/configs/project_config.dart';class CollapseViewTestPage extends StatefulWidget {const CollapseViewTestPage({Key? key}) : super(key: key);@overrideState<CollapseViewTestPage> createState() => _CollapseViewTestPageState();
}class _CollapseViewTestPageState extends State<CollapseViewTestPage> {var _isFold = false;var _isFold2 = false;var _isFold3 = false;@overrideWidget build(BuildContext context) {return Scaffold(appBar: const BaseAppBar('JhCollapseView'),body: _body(),backgroundColor: KColors.dynamicColor(context, KColors.wxBgColor, KColors.kBgDarkColor),);}_body() {return ListView(children: [Column(children: [JhCollapseView(title: '标题', content: _testView()),JhCollapseView(title: '这是很长很长很长长很长很长很长很长很长很长很长很长很长很长的标题',titleStyle: TextStyle(color: Colors.white, fontSize: 13),arrowColor: Colors.white,headerColor: Color(0xFFA2BFEE),content: _testView(),),JhCollapseView(titleWidget: _titleW(),titleCrossAxisAlignment: CrossAxisAlignment.start,arrowColor: Colors.white,headerColor: Color(0xFFA2BFEE),content: _testView(),),JhCollapseView(titleWidget: _titleW2(),headerColor: Colors.white,content: _testView(),),TextButton(child: Text('点击更新折叠状态'),onPressed: () {setState(() {_isFold = !_isFold;});},),JhCollapseView(isFold: _isFold,title: 'isFold更新',content: _testView(),onChange: (isFold) {print('isFold:$isFold');setState(() {_isFold = isFold;});},),JhCollapseView(title: 'card样式',collapseStyle: JhCollapseStyle.card,content: _testView(),),JhCollapseView(title: '标题',collapseStyle: JhCollapseStyle.card,content: Container(child: Column(children: [separator(),_testView(),],),),),JhCollapseView(isFold: true,collapseStyle: JhCollapseStyle.card,// headerPadding: EdgeInsets.all(0),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(3),boxShadow: [BoxShadow(color: Colours.red, spreadRadius: 1.5, blurRadius: 1.5)],),titleWidget: _titleW2(),content: _testView(),),Container(margin: EdgeInsets.symmetric(horizontal: 10, vertical: 8),decoration: KStyles.cellBorderStyle,child: JhCollapseView(padding: EdgeInsets.all(0),margin: EdgeInsets.all(0),title: '标题',titleStyle: TextStyle(color: Colors.white),arrowColor: Colors.white,headerColor: Color(0xFFA2BFEE),content: Container(child: ListView.builder(shrinkWrap: true,physics: NeverScrollableScrollPhysics(),itemCount: 2,itemBuilder: (BuildContext context, int index) {return Container(color: Colors.yellow,child: ListTile(title: Text('title$index'),subtitle: Text('subtitle$index'),),);},),),),),JhCollapseView(title: '居中箭头card样式',isFold: true,collapseType: JhCollapseType.centerArrow,collapseStyle: JhCollapseStyle.card,titleWidget: _titleW2(),content: _testView(),),JhCollapseView(title: '居中箭头flat样式',isFold: true,collapseType: JhCollapseType.centerArrow,collapseStyle: JhCollapseStyle.flat,titleWidget: _titleW2(),content: _testView(),),JhCollapseView(isFold: _isFold2,title: _isFold2 ? '查看更多' : '收起',collapseType: JhCollapseType.seeMore,titleWidget: _titleW2(),content: _testView(),onChange: (isFold) {print('isFold2:$isFold');setState(() {_isFold2 = isFold;});},),JhCollapseView(isFold: _isFold3,title: _isFold3 ? '查看更多' : '收起',collapseType: JhCollapseType.seeMore,collapseStyle: JhCollapseStyle.card,hiddenDivider: true,titleWidget: _titleW2(),content: _testView(),onChange: (isFold) {print('isFold3:$isFold');setState(() {_isFold3 = isFold;});},),])]);}_testView() {return Container(color: Colors.yellow, height: 100);}_titleW() {return Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Expanded(child: Row(// crossAxisAlignment: CrossAxisAlignment.start,children: [Flexible(child: Text('1212222222222222222222222222222222222222222')),SizedBox(width: 10),Container(padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),color: Colors.red,child: Text('自定义title', style: TextStyle(color: Colors.white, fontSize: 12)),),],),),// Icon(Icons.arrow_drop_down),],);}_titleW2() {return Container(child: Column(children: [Row(crossAxisAlignment: CrossAxisAlignment.start,children: [Text('Name:', style: KStyles.textBold15),SizedBox(width: 5),Expanded(child: Text('custom title widget')),],),SizedBox(height: 8),Row(crossAxisAlignment: CrossAxisAlignment.start,children: [Text('Code:', style: KStyles.textBold15),SizedBox(width: 5),Expanded(child: Text('123')),],),SizedBox(height: 8),Row(crossAxisAlignment: CrossAxisAlignment.start,children: [Text('test:', style: KStyles.textBold15),SizedBox(width: 5),Expanded(child: Text('1212222222222222222222222222222222222222222')),],),],),);}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/4186.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于SNAP使用SAR数据做变化检测change detection

基于SNAP使用SAR数据做变化检测change detection 1. 前言2. 步骤2.1 添加数据2.2 辐射定标--散斑过滤--地形矫正2.3 裁剪2.4 变化检测 3.查看变化检测结果 1. 前言 在SNAP中&#xff0c;change detection主要通过Stack工具来完成。 SAR数据&#xff1a;Radarsat-2 SLC 其他数据…

基于FastGPT搭建知识库问答系统

什么是 FastGPT &#xff1f; FastGPT 是一个基于 LLM 大语言模型的知识库问答系统&#xff0c;提供开箱即用的数据处理、模型调用等能力。同时可以通过 Flow 可视化进行工作流编排&#xff0c;从而实现复杂的问答场景&#xff01; FastGPT 允许用户构建本地知识库&#xff0c;…

MQTT数据传输Payload的常见格式介绍

使用MQTT client过程中看到常见的数据格式&#xff1a; 下面是介绍 Plaintext&#xff08;纯文本&#xff09; 介绍&#xff1a;纯文本编码是最基本的编码形式&#xff0c;它使用标准的ASCII或Unicode字符来表示数据。这种编码格式是人类可读的&#xff0c;因为它直接表示文本信…

(成品论文22页)24深圳杯数学建模A题1-4问完整代码+参考论文重磅更新!!!!

论文如下&#xff1a; 基于三球定位的多个火箭残骸的准确定位 针对问题一&#xff1a;为了进行单个残骸的精确定位&#xff0c;确定单个火箭残骸发生音爆 时的精确位置和时间&#xff0c;本文基于三球定位模型&#xff0c;考虑到解的存在性和唯一性&#xff0c; 选取了四个监测…

第七篇、animateDiff使用

1、文生图 2、提示词游历 在不同帧设置不同的提示词&#xff0c;有公共提示词和游历提示词&#xff0c;上面是公共的&#xff0c;下面是游历

VS Code开发STM32F4xx jlink接口swd模式

VS Code开发STM32F4xx jlink接口swd模式(测试OK) 下面的代码(已验证),只作为参考,不同情况的更改参照文章末尾链接 c_cpp_properties.json代码 (其中include路径和宏定义可以参照makefile添加) : {"configurations": [{"name"…

上市公司-人工智能的采纳测算程度数据集(2003-2021年)

01、数据简介 人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;是一个研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的新技术科学。它是计算机科学的一个分支&#xff0c;旨在生产出一种能以人类智能相似的方式做出反应的智能机…

汽车新智能图谱里:理解腾讯的AI TO B路径

将自身的C2B产品和产业理解充分AI化&#xff0c;在自身内部场景率先验证跑通后&#xff0c;进而释放给产业伙伴&#xff0c;对应到具体的需求痛点&#xff0c;一起打磨对应的行业AI模型。 这也恰是腾讯“实用”标签背后的AI产业路径。 作者|皮爷 出品|产业家 成本、性价…

直流有刷电机入门

文章目录 123455.25.3 1 2 电刷 材质是 石墨 3 130马达 就几毛钱 几块钱这学的就是减速电机P MAX一定 pf*v 降低速度 扭矩就会大 4 还有空载电流 过大负载 时 有堵转电流 &#xff08;可分析电流 来看电机工作状态&#xff09;RPM 转每分钟 5 5.2 这的线圈 是简化后的转子绕组…

一个数据人眼中的《上游思维》

最近读了《上游思维》这本书&#xff0c;很受启发&#xff0c;我想从一个数据人的角度来聊一聊我对这本书的读后感。上游思维本质上是帮助我们解决问题&#xff0c;我发现在解决问题相关的每个阶段&#xff1a;发现问题、找到解决问题的方法、解决问题的过程中、评估问题以及预…

电磁仿真--基本操作-CST-(4)

目录 1. 简介 2. 建模过程 2.1 基本的仿真配置 2.2 构建两个圆环体和旋转轴 2.3 切分圆环体 2.4 衔接内外环 2.5 保留衔接部分 2.6 绘制内螺旋 2.7 绘制外螺旋 2.8 查看完整体 2.9 绘制引脚 2.10 设置端口 2.11 仿真结果 3. 使用Digilent AD2进行测试 3.1 进行…

大厂面试题:两道来自京东的关于MyBatis执行器的面试题

大家好&#xff0c;我是王有志。 今天给大家带来两道来自于京东关于的 MyBatis 面试题&#xff1a; MyBatis 提供了哪些执行器&#xff08;Executor&#xff09;&#xff1f;它们有什么区别&#xff1f;Mybatis 中如何指定 Executor 的类型&#xff1f; MyBatis 提供了哪些执…

深度学习系列66:试穿模型IDM-VTON上手

1. 模型概述 如图&#xff0c;总体流程为&#xff1a; 输入为&#xff1a;衣服的编码xg&#xff1b;人物noise的编码xt&#xff1b;人物身上衣物的mask和人体pose分割(densepose)&#xff1b;衣服部分经过两部分网络&#xff1a;1&#xff09;高级语义网络IP-Adapter&#xff…

3122.使矩阵满足条件的最少操作次数

周赛第三题,知道要用动态规划,但是不知道怎么回到子问题 显然根据题意我们需要让每一列都相同,但是相邻列不能选择同一种数字,观察到数据nums[i]介于0-9,我们就以此为突破口. 首先我们用count[n][10], count[i][j]记录第i1列值为j的元素个数,转移方程如下: dfs(i,pre) max(dfs…

pytest-xdist:远程多主机 - 分布式运行自动化测试

简介&#xff1a;pytest-xdist插件使用新的测试执行模式扩展了pytest&#xff0c;最常用的是在多个CPU之间分发测试以加快测试执行&#xff0c;即 pytest -n auto同时也是一个非常优秀的分布式测试插件&#xff0c;分别支持ssh和socket两种方式实现master和worker的远程通讯。…

游戏新手村20:游戏落地页广告页如何设计

在互联网营销中,着陆页(Landing Page,有时被称为首要捕获用户页)就是当潜在用户点击广告或者搜索引擎搜索结果页后显示给用户的网页&#xff0c;LandingPage对于游戏广告的转化率和重要性就不言而喻了。 网页游戏LP页面 上图就是我们大家在浏览网站时不小心蹦出或者主动点击某…

IIS中搭建.Net Core项目,步骤详解

一、准备服务器 1&#xff09;安装IIS 这个比较简单&#xff0c;百度一下就行 2&#xff09;安装 .NET Core 运行时 下载地址&#xff1a;下载 .NET(Linux、macOS 和 Windows) 因为我是本地开发&#xff0c;所以我下载的是SDK 安装成功之后显示如下&#xff1a; 检查是否安装…

万兆以太网MAC设计(6)IP协议报文格式详解以及IP层模块设计

文章目录 前言&#xff1a;IPv4报文协议格式二、IP_RX模块设计2.1、模块接口2.2、模块工作过程 三、IP_TX模块设计3.1、模块接口3.2、模块工作过程 四、仿真4.1、发送端4.2、接受端 前言&#xff1a;IPv4报文协议格式 参考&#xff1a;https://sunyunqiang.com/blog/ipv4_prot…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-5

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

曲线「三分」

明明做作业的时候遇到了 n 个二次函数Si(x)ax^2bxc &#xff0c;他突发奇想设计了一个新的函数F(x)max{Si(x)},i1,2……n 。 明明现在想求这个函数在 的最小值&#xff0c;要求精确到小数点后四位&#xff0c;四舍五入。 输入格式 输入包含 T组数据&#xff0c;每组第一行一…