zoukankan      html  css  js  c++  java
  • 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(),
                ),
              ],
            ),
          ),
        );
      }
    }

    效果:

  • 相关阅读:
    线程资料整理
    泛型委托使用
    生成树形结构的JSON字符串代码(C#)供前端Angular tree使用.
    Bootstrap学习笔记(6)
    Bootstrap学习笔记(5)
    Bootstrap学习笔记(4)
    渗透利器-kali工具 (第一章-3) Kali Linux 基础命令介绍下
    渗透利器-kali工具 (第一章-2) Kali Linux 基础命令介绍上
    渗透利器-kali工具 (第一章-1) Kali
    渗透利器-kali工具 (第一章) 前言篇
  • 原文地址:https://www.cnblogs.com/loaderman/p/11332758.html
Copyright © 2011-2022 走看看