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(),
                ),
              ],
            ),
          ),
        );
      }
    }

    效果:

  • 相关阅读:
    arcgis api for js入门开发系列二十打印地图的那些事
    arcgis api 3.x for js 入门开发系列十九图层在线编辑
    arcgis api 3.x for js 入门开发系列十八风向流动图(附源码下载)
    influxDB 0.9 C# 读写类
    [InfluxDB] 安装与配置
    分布式,集群,冗余的理解
    CentOS 7.0系统安装配置图解教程
    InfluxDB学习之InfluxDB的基本操作| Linux大学
    InfluxDB v1.6.4 下载
    InfluxDB中文文档
  • 原文地址:https://www.cnblogs.com/loaderman/p/11332758.html
Copyright © 2011-2022 走看看