20個Flutter實例視頻教程-第14節: 展開閉合列表案例

 

博客地址;

https://jspang.com/post/flutterDemo.html#toc-5b0

視頻地址：

https://www.bilibili.com/video/av39709290/?p=14

 

 

新建類：

expansion_panel_list.dart 這是一個動態的widget

而後新建類，開和 和 打開，咱們要作一個控制這個的類

 

聲明兩個List。一個int類型的List，爲了生成數組

第二個數組是ExpandStateBean的List

List<int> mList;
List<ExpandStateBean> expandStateBeanList;

而後再去寫構造方法

開始寫最主要的build方法

expandState這個組件必須放在可滾動的組件內，這裏咱們使用SingleChildScrollView這是個最簡單的可滾動的widget

下面就是咱們的主角：ExpansionPanelList

修正一個地方。這裏的動態類名以前寫錯了。應該叫作:ExpanionPanelListDemo

若是不糾正這個錯誤。在寫真正的ExpanionPanelList組件的時候，裏面的callback函數就快捷鍵打不出來了。

 

這裏遍歷一下mList這個對象。最後須要再toList().

toList是Dart的語法

 

這樣就基本差很少了。還須要完善一下回調的方法：

 

再修正代碼一個地方 變量名和視頻中命名的不一致

 

咱們聲明一個內部的方法：_setCurrentIndex
傳遞索引值和 一個打開關閉的狀態。循環遍歷咱們的對象expandStateList，找到對應的索引值進行取反

 

這樣咱們直接傳遞給ExpansionPanelList插件的回調函數

 

main.dart

 

效果展現：

 

 

最終代碼：

import 'package:flutter/material.dart';
import 'expansion_tile.dart';
import 'expansion_panel_list.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //home: ExpansionTileDemo()
       home: ExpansionPanelListDemo()
    );
  }
}

main.dart

 

 

import 'package:flutter/material.dart';

class ExpansionPanelListDemo extends StatefulWidget {
  @override
  _ExpansionPanelListDemoState createState() => _ExpansionPanelListDemoState();
}

class _ExpansionPanelListDemoState extends State<ExpansionPanelListDemo> {
  List<int> mList;
  List<ExpandStateBean> expandStateList;
  _ExpansionPanelListDemoState(){
    mList=new List();
    expandStateList=new List();
    for(int i=0;i<10;i++){
      mList.add(i);
      expandStateList.add(ExpandStateBean(i,false));//索引是i，狀態所有關閉
    }
  }

  _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 panel list')),
      body: SingleChildScrollView(
        child: ExpansionPanelList(
          expansionCallback: (index,bol){
            _setCurrentIndex(index,bol);
          },
          children: mList.map((index){
            return ExpansionPanel(
              headerBuilder: (context,isExpanded){
                return ListTile(
                  title: Text('This is No.$index')
                );
              },
              body: ListTile(
                title: Text('expansion no.$index'),
              ),
              isExpanded: expandStateList[index].isOpen
            );
          }).toList(),
        ),
      ),
    );
  }
}

class ExpandStateBean {
  var isOpen;
  var index;
  ExpandStateBean(this.index,this.isOpen);
}

expansion_panel_list.dart