• Flutter ExpansionPanel 可展开的收缩控件


    文档:https://api.flutter.dev/flutter/material/ExpansionPanel-class.html

    demo:

    import 'package:flutter/material.dart';
    
    class ExpansionPanelItem {
      final String headerText;
      final Widget body;
      bool isExpanded;
    
      ExpansionPanelItem({
        this.headerText,
        this.body,
        this.isExpanded,
      });
    }
    
    class ExpansionPanelDemo extends StatefulWidget {
      @override
      _ExpansionPanelDemoState createState() => _ExpansionPanelDemoState();
    }
    
    class _ExpansionPanelDemoState extends State<ExpansionPanelDemo> {
      List<ExpansionPanelItem> _expansionPanelItems;
    
      @override
      void initState() {
        super.initState();
    
        _expansionPanelItems = <ExpansionPanelItem>[
          ExpansionPanelItem(
            headerText: 'Panel A',
            body: Container(
              padding: EdgeInsets.all(16.0),
               double.infinity,
              child: Text('Content for Panel A.'),
            ),
            isExpanded: false,
          ),
          ExpansionPanelItem(
            headerText: 'Panel B',
            body: Container(
              padding: EdgeInsets.all(16.0),
               double.infinity,
              child: Text('Content for Panel B.'),
            ),
            isExpanded: false,
          ),
          ExpansionPanelItem(
            headerText: 'Panel C',
            body: Container(
              padding: EdgeInsets.all(16.0),
               double.infinity,
              child: Text('Content for Panel C.'),
            ),
            isExpanded: false,
          ),
        ];
      }
      
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('ExpansionPanelDemo'),
            elevation: 0.0,
          ),
          body: Container(
            padding: EdgeInsets.all(16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ExpansionPanelList(
                  expansionCallback: (int panelIndex, bool isExpanded) {
                    setState(() {
                      _expansionPanelItems[panelIndex].isExpanded = !isExpanded;
                    });
                  },
                  children: _expansionPanelItems.map(
                    (ExpansionPanelItem item) {
                      return ExpansionPanel(
                        isExpanded: item.isExpanded,
                        body: item.body,
                        headerBuilder: (BuildContext context, bool isExpanded) {
                          return Container(
                            padding: EdgeInsets.all(16.0),
                            child: Text(
                              item.headerText,
                              style: Theme.of(context).textTheme.title,
                            ),
                          );
                        },
                      );
                    }
                  ).toList(),
                ),
              ],
            ),
          ),
        );
      }
    }

    效果:

  • 相关阅读:
    opencvcvRound返回整数值四舍五入
    opencvcvCeil返回不小于参数的最小整数值
    opencvcvFloor返回不大于参数的最大整数值
    华为云构建云原生DevSecOps平台,保障软件供应链全流程安全可信
    云原生数据库白皮书,发布!
    云图说丨初识可信分布式身份服务
    4步教你学会使用LinuxAudit工具
    一文带你认知定时消息发布RocketMQ
    ModelBox开发体验:使用YOLOv3做口罩检测
    10种有用的Linux Bash_Completion 命令示例
  • 原文地址:https://www.cnblogs.com/loaderman/p/11332758.html
Copyright © 2020-2023  润新知