美文网首页
Flutter ExpansionPanelList 的使用

Flutter ExpansionPanelList 的使用

作者: 叶秋_YQ | 来源:发表于2019-05-06 14:21 被阅读0次
    控件展开和关闭

    入口文件

    import 'package:flutter/material.dart';
    import 'expansion_tile_demo.dart';
    main(){
      runApp(MyApp());
    }
    class MyApp extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData.dark(),
          home: ExpansionParnelListDemo()
        );
      }
    }
    

    方法

    import 'package:flutter/material.dart';
    class ExpansionParnelListDemo extends StatefulWidget {
      ExpansionParnelListDemo({Key key}) : super(key: key);
    
      _ExpansionParnelListDemoState createState() => _ExpansionParnelListDemoState();
    }
    
    class _ExpansionParnelListDemoState extends State<ExpansionParnelListDemo> {
     
      List<int> mList;
      // 存放状态和索引List
      List<ExpandStateBean> expandStateList;
    
      _ExpansionParnelListDemoState(){
        mList = new List();
        expandStateList = new List();
        for(int i = 0; i < 10; i ++){
          mList.add(i);
          // 第一个是索引,第二个是否打开;
          expandStateList.add(ExpandStateBean(i,false));
        }
      }
    
      // 判断用户点击是否打开
      _setCurrentIndex(int index, isExpand){
        setState(() {
          // 循环判断用户点击和索引是否一致,并操作状态
          expandStateList.forEach((item){
            if(item.index == index){
              item.isOpen = !isExpand;
            }
          });
        });
      }
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('Expansion List')),
          // 可滚动的控件
          body: SingleChildScrollView(
            // ExpansionPanelList 必须放在可滚动的控件里面
            child: ExpansionPanelList(
              expansionCallback: (index,bol){
                _setCurrentIndex(index,bol);
              },
              children: mList.map((index){
                return ExpansionPanel(
                  // 上下文 是否是打开的
                  headerBuilder: (context,isExpanded){
                    return ListTile(
                      title: Text('我是标题.$index'),
                    );
                  },
                  body: ListTile(
                    title: Text('内容.$index'),
                  ),
                  // 判断是否打开
                  isExpanded: expandStateList[index].isOpen
                );
              }).toList(),
            ),
          ),
        );
      }
    }
    
    // 控制打开和关闭的类
    class ExpandStateBean{
      var isOpen;
      var index;
      ExpandStateBean(this.index,this.isOpen);
    }

    相关文章

      网友评论

          本文标题:Flutter ExpansionPanelList 的使用

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