美文网首页Flutter学习笔记
Flutter的可收缩面板ExpandPanel

Flutter的可收缩面板ExpandPanel

作者: 王俏 | 来源:发表于2019-10-10 10:50 被阅读0次
    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> {
      bool _isExpand = false;
      List<ExpansionPanelItem> _expansionPanelItems;
    
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
        _expansionPanelItems = <ExpansionPanelItem>[
          ExpansionPanelItem(
              headerText: 'Panel A',
              body: Container(
                padding: EdgeInsets.all(16.0),
                width: double.infinity,
                child: Text('Content for Panel A'),
              ),
              isExpanded: false,
              ),
          ExpansionPanelItem(
              headerText: 'Panel B',
              body: Container(
                padding: EdgeInsets.all(16.0),
                width: double.infinity,
                child: Text('Content for Panel B'),
              ),
              isExpanded: false,
              ),
          ExpansionPanelItem(
              headerText: 'Panel C',
              body: Container(
                padding: EdgeInsets.all(16.0),
                width: 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: (panelIndex, isExpanded) {
                    setState(() {
                      _expansionPanelItems[panelIndex].isExpanded =
                          !_expansionPanelItems[panelIndex].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(),
                ),
              ],
            ),
          ),
        );
      }
    }
    
    
    

    相关文章

      网友评论

        本文标题:Flutter的可收缩面板ExpandPanel

        本文链接:https://www.haomeiwen.com/subject/cwfjyctx.html