Flutter - 折叠面板

demo 地址: https://github.com/iotjin/jh_flutter_demo
代码不定时更新,请前往github查看最新代码
flutter 自定义折叠组件

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

效果图

示例

c 复制代码
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);

  @override
  State<CollapseViewTestPage> createState() => _CollapseViewTestPageState();
}

class _CollapseViewTestPageState extends State<CollapseViewTestPage> {
  var _isFold = false;
  var _isFold2 = false;
  var _isFold3 = false;

  @override
  Widget 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')),
            ],
          ),
        ],
      ),
    );
  }
}
相关推荐
君蓦4 小时前
Flutter 本地存储与数据库的使用和优化
flutter
problc13 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
lqj_本人1 天前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人1 天前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
起司锅仔1 天前
Flutter启动流程(2)
flutter
hello world smile1 天前
最全的Flutter中pubspec.yaml及其yaml 语法的使用说明
android·前端·javascript·flutter·dart·yaml·pubspec.yaml
lqj_本人1 天前
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
flutter·harmonyos
iFlyCai1 天前
极简实现酷炫动效:Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果
flutter
lqj_本人1 天前
Flutter&鸿蒙next 中使用 MobX 进行状态管理
flutter·华为·harmonyos