Flutter之ExpansionTile组件

ExpansionTile组件

ExpansionTile Widget就是一个可以展开闭合的组件，常用的属性有如下几个。

title:闭合时显示的标题，这个部分经常使用Text Widget。
leading:标题左侧图标，多是用来修饰，让界面显得美观。
backgroundColor: 展开时的背景颜色，当然也是有过度动画的，效果非常好。
children: 子元素，是一个数组，可以放入多个元素。
trailing ：右侧的箭头，你可以自行替换但是我觉的很少替换，因为谷歌已经表现的很完美了。
initiallyExpanded: 初始状态是否展开，为true时，是展开，默认为false，是不展开。

代码示例如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title:'Flutter Demo',

      theme: new ThemeData.dark(),

      home:ExpansionTileDemo()

    );

  }

}

class ExpansionTileDemo extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('Expansion Tile Demo')),

      body: Center(

        child: ExpansionTile(

          title: Text('Expansion Tile'),

          leading: Icon(Icons.ac_unit),

          backgroundColor: Colors.white12,

          children: <Widget>[

            ListTile(

              title: Text('list tile'),

              subtitle: Text('subtitle'),

            ),

          ],

          initiallyExpanded: true, //打开状态  不写默认false闭合状态

        ),

      ),

    );

  }

}

Flutter还很贴心的为提供了一个ExpansionPanelList Widget，它可以实现展开闭合的列表功能。

ExpansionPanelList 常用属性

expansionCallback:点击和交互的回掉事件，有两个参数，第一个是触发动作的索引，第二个是布尔类型的触发值。
children:列表的子元素，里边多是一个List数组。

注意：ExpansionPanelList要在SingleChildScrollView里使用

修改上面的代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title:'Flutter Demo',

      theme: new ThemeData.dark(),

      //home:ExpansionTileDemo(),

      home: ExpansionPanelListDemo(),

    );

  }

}

class ExpandStateBean{ //控制打开关闭状态

  var index,isOpen;

  ExpandStateBean(this.index, this.isOpen);

}

class ExpansionPanelListDemo  extends StatefulWidget {

  _ExpansionPanelListDemoState createState() => _ExpansionPanelListDemoState();

}

class _ExpansionPanelListDemoState extends State<ExpansionPanelListDemo> {

  List<int> mList; //列表数组

  List<ExpandStateBean> expandStateList; //自定义ExpandStateBean的数组expandStateList

  _ExpansionPanelListDemoState(){ //构造方法

    mList = new List(); //初始化

    expandStateList = new List(); //初始化

    for(int i=; i<; 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 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('expansin no.$index'),

              ),

              isExpanded: expandStateList[index].isOpen

            );

          }).toList(),

        ),

      ),

    );

  }

}

巴特西

Flutter之ExpansionTile组件

ExpansionTile组件

ExpansionPanelList 常用属性

最新文章

热门文章