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,一经查实,立即删除!

相关文章

K8s: 从集群外部访问Service

从集群外部访问 Service 1 &#xff09;概述 在前面我们一直实践的是在集群内部访问 Service&#xff0c;之前有2种方法 方法1&#xff1a;在一个node节点上&#xff0c;通过对创建的的时候&#xff0c;对port进行一个环境变量的注册来保证Service能够正确对 不同的pod 访问到…

基于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;…

conda创建新环境

&#xff11;、创建虚拟环境&#xff1a; Anaconda创建环境&#xff1a;比如&#xff0c;创建pyhon&#xff1d;3.6的版本环境取名叫 name conda create -n name python3.6 2、删除虚拟环境操作&#xff1a;&#xff08;谨慎操作&#xff09; conda remove -n name --all &am…

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

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

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

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

洛谷 B3969 [GESP202403 五级] B-smooth 数 题解

思路 我们只要求出每个数的最大质因数&#xff0c;再一个个判断是否满足要求即可。 如何找到每个数的最大质因数呢&#xff1f;其实&#xff0c;我们可以在埃氏筛法的基础上进行改进&#xff0c;从而达到算出最大质因数的目的。 让我们先来了解一下埃氏筛法&#xff0c;知道…

第七篇、animateDiff使用

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

C#中如何定义带参数的EventHandler?

简述 事件调用的所有方法都需要两个参数&#xff1a;object sender&#xff0c;EventArgs e。该事件使用这两个参数调用方法&#xff0c;因此我们不能直接添加自定义参数。 比如下面这段代码&#xff0c;我们想在 MessageBox 中显示字符串 s &#xff0c;这必然是不成。 priv…

VS Code开发STM32F4xx jlink接口swd模式

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

数据库系统工程师之数据结构

在数据库系统工程师的考试中&#xff0c;数据结构是一个重要的考点。数据结构主要关注数据元素之间的相互关系以及它们的组织和存储方式。以下是数据库系统工程师考试中数据结构的主要考点&#xff1a; 1.线性结构&#xff1a;线性结构是数据元素之间存在一对一关系的数据结构。…

上市公司-人工智能的采纳测算程度数据集(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 进行…

Stable Diffusion入门指南

SD 保姆教程&#xff0c;从原理功能到案例输出展示&#xff0c;最后简述 ControlNet 的使用技巧。 Stable Diffusion 的基本介绍 Stable Diffusion是一种基于扩散过程的图像生成模型&#xff0c;可以生成高质量、高分辨率的图像。它通过模拟扩散过程&#xff0c;将噪声图像逐…

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

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

自然语言处理的发展历程

1.自然语言处理发展的7个阶段 序号阶段时间贡献代表人物1起源期1913-1956思考使用图灵算法计量模型来描述自然语言&#xff0c;描述词语及词语之间的关系。这一阶段停留在理论层面做探索图灵、马尔可夫、香农2基于规则的形式语言理论期1957-1970形式语言理论的提出&#xff0c…

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

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