flutter 点击可展开收缩列表组件ExpansionPanelList

青旅半醒 2021-07-24 22:38 1340阅读 0赞

点击可展开收缩列表组件
    	必须放在可滚动组件里
    
    ExpansionPanelList(
             expansionCallback: (index,bool){  点击右侧图标的回调
    				一般用来设置是否展开收缩
             },
             
             children:[
             	 ExpansionPanel(
                  headerBuilder: (context,isExpanded){
                    return 头部内容组件
                  },
                  body:展开部分内容组件,
                  isExpanded: 是否展开布尔值
                ),
             ]
             ...
           )

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]  
代码示例:

import 'package:flutter/gestures.dart';
    import "package:flutter/material.dart";
    import 'package:flutter/rendering.dart';
    import "drag.dart";
    import 'dart:ui';
    
    import 'page/1.dart';
    import 'page/2.dart';
    import 'page/3.dart';
    import 'xuan.dart';
    
    void main()
    { 
      runApp(App());
    }
    class App extends StatelessWidget { 
      const App({ Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) { 
        return App2();
      }
    }
    
    class App2 extends StatefulWidget { 
      App2({ Key key}) : super(key: key);
    
      @override
      _AppState createState() => _AppState();
    }
    
    class _AppState extends State<App2> with SingleTickerProviderStateMixin { 
    
      // List _page=[Home3(),Home2(),Home4()];
      // int index=0;
      TabController con;
    
      @override
      void initState() { 
        // TODO: implement initState
        super.initState();
        con=new TabController(length: 3, vsync: this);
      }
    
      @override
      void dispose() { 
        // TODO: implement dispose
        super.dispose();
        con.dispose();
      }
    
      @override
      Widget build(BuildContext context) { 
        return  MaterialApp(
          home:Scaffold(
            appBar:AppBar(
              title: Text('小案例'),
            ),
            
            body:Home(),
          //去掉右上角的debug贴纸
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.blue
          ),
          );
      }
    }
    
    
    class Home extends StatefulWidget { 
    
      @override
      _HomeState createState() => _HomeState();
    }
    
    class _HomeState extends State<Home> { 
      
      List<int> mList=new List();
      List<ExpandState> expandStateList=new List();
    
      void initState(){ 
            for(int i=0;i<10;i++)
        { 
          mList.add(i);
          expandStateList.add(ExpandState(i,false));
        }
      }
    
    
    
      @override
      Widget build(BuildContext context) { 
    
        return Container(
          // width: double.infinity,
           child:Center(
             child:SingleChildScrollView(
               child:ExpansionPanelList(
                 expansionCallback: (index,bool){ 
                   //回调
                   setState(() { 
                      expandStateList[index].isOpen=! expandStateList[index].isOpen;
                   });
                 },
                 
                 children: mList.map((index){ 
                    return ExpansionPanel(
                      headerBuilder: (context,isExpanded){ 
                        return ListTile(
                          title: Text('标题'),
                          subtitle: Text("二级标题"),
                          
                        );
                      },
                      body: ListTile(
                        title: Text('内容内容内容'),
                      ),
                      isExpanded: expandStateList[index].isOpen
                    );
                 }).toList(),
    
               ) ,
             ),
           )
           
        );
      }
    }
    
    class ExpandState{ 
      var isOpen;
      var index;
      ExpandState(this.index,this.isOpen);
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/2a7213ae78254f0c9f3dc8c0bd5bd282.png