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')),
            ],
          ),
        ],
      ),
    );
  }
}
相关推荐
sunly_11 小时前
Flutter:启动屏逻辑处理01:修改默认APP启动图标
flutter
sunly_11 小时前
Flutter:启动屏逻辑处理02:启动页
android·javascript·flutter
Alex_z089711 小时前
flutter gradle版本更新到8.9
flutter
那年星空12 小时前
Flutter 设计模式全面解析:抽象工厂
flutter·设计模式·架构
林北芒大果17 小时前
【Flutter】搭建Flutter开发环境,安卓开发
android·flutter
SunshineBrother19 小时前
Flutter求职、面试20+面试官总结:Dart篇
android·前端·flutter
李新_2 天前
一文聊聊Flutter多业务混合工程实践
android·flutter
sunly_2 天前
Flutter:flutter_screenutil屏幕适配
前端·javascript·flutter
sunly_2 天前
Flutter:AnimatedPadding动态修改padding
android·flutter
LinXunFeng3 天前
Flutter - 子部件任意位置观察滚动数据
前端·flutter·开源