Can't create ExpansionPanelList with Items in Flutter

后端 未结 2 448
鱼传尺愫
鱼传尺愫 2021-01-06 23:57

I\'m new to Flutter so i am trying to get into it. But I\'m hanging on creating an ExpansionPanelList with ExpansionPanels in it. And Like the title says all created in goog

相关标签:
2条回答
  • 2021-01-07 00:17

    It sounds like you need to put your ExpansionPanelList into a ListView or Column or some other container that won't force it to be a particular size.

    Here is an example of expansion panel usage.

    import 'package:flutter/material.dart';
    
    class ShoppingBasket extends StatefulWidget {
      @override
      ShoppingBasketState createState() => new ShoppingBasketState();
    }
    
    class MyItem {
      MyItem({ this.isExpanded: false, this.header, this.body });
    
      bool isExpanded;
      final String header;
      final String body;
    }
    
    class ShoppingBasketState extends State<ShoppingBasket> {
      List<MyItem> _items = <MyItem>[
        new MyItem(header: 'header', body: 'body')
      ];
    
      @override
      Widget build(BuildContext context) {
        return new ListView(
          children: [
            new ExpansionPanelList(
              expansionCallback: (int index, bool isExpanded) {
                setState(() {
                  _items[index].isExpanded = !_items[index].isExpanded;
                });
              },
              children: _items.map((MyItem item) {
                return new ExpansionPanel(
                  headerBuilder: (BuildContext context, bool isExpanded) {
                    return new Text(item.header);
                  },
                  isExpanded: item.isExpanded,
                  body: new Container(
                    child: new Text("body"),
                  ),
                );
              }).toList(),
            ),
          ],
        );
      }
    }
    
    void main() {
      runApp(new MaterialApp(
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text('ExpansionPanel Example'),
          ),
          body: new ShoppingBasket(),
        ),
      ));
    }
    

    The Flutter Gallery has a more detailed expansion panels example.

    0 讨论(0)
  • 2021-01-07 00:35

    There is another way to implement same user experience that is using ExpansionTile inside a ListView

             ListView(
                  shrinkWrap: true,
                  children: <Widget>[
                    ExpansionTile(
                      leading: Icon(Icons.event),                         
                      title: Text('Test1'),
                      children: <Widget>[
                        ListTile(title: Text('Title of the item')),
                        ListTile(
                          title: Text('Title of the item2'),
                        )
                      ],
                    ),
                    ExpansionTile(
                      title: Text('Test2'),
                      children: <Widget>[
                        ListTile(title: Text('Title of the item')),
                        ListTile(
                          title: Text('Title of the item2'),
                        )
                      ],
                    )
                  ],
                )
    
    0 讨论(0)
提交回复
热议问题