zoukankan      html  css  js  c++  java
  • 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=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 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(),
            ),
          ),
        );
      }
    }
  • 相关阅读:
    Python元组、列表、字典
    测试通过Word直接发布博文
    Python环境搭建(windows)
    hdu 4003 Find Metal Mineral 树形DP
    poj 1986 Distance Queries LCA
    poj 1470 Closest Common Ancestors LCA
    poj 1330 Nearest Common Ancestors LCA
    hdu 3046 Pleasant sheep and big big wolf 最小割
    poj 3281 Dining 最大流
    zoj 2760 How Many Shortest Path 最大流
  • 原文地址:https://www.cnblogs.com/joe235/p/11225861.html
Copyright © 2011-2022 走看看