flutter - 如何在Flutter中控制扩展面板

标签 flutter dart flutter-layout

因此,我有一个由另一个列表构成的元素列表。该列表在expansionPanels列表中列出。
我无法扩大和缩小面板。有人可以帮忙。
另外,我还对 flutter 感到陌生,可以提供一种更好的方法。

class Expansionpanel extends StatefulWidget {
  final List<MoneyTransactionModel> transactions;
  Expansionpanel({Key key, @required this.transactions}) : super(key: key);

  Expansionpaneltate createState() => Expansionpaneltate();
}

class NewItem {
  bool isExpanded;
  final String header;
  final Widget body;
  final Icon iconpic;
  NewItem(this.isExpanded, this.header, this.body, this.iconpic);
}

class Expansionpaneltate extends State<Expansionpanel> {
  List<NewItem> getItemList() {
    List<NewItem> items = List<NewItem>();
    for (final item in widget.transactions) {
      
      items.add(NewItem(
          false,
          item.productId,
          Padding(
              padding: EdgeInsets.all(20.0),
              child: Column(children: <Widget>[
                Text('data'),
                Text('data'),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Text('data'),
                    Text('data'),
                    Text('data'),
                  ],
                ),
                Radio(value: null, groupValue: null, onChanged: null),
                //put the children here
              ])),
          Icon(Icons.image)));
    }
    return items;
  }

  Widget List_Criteria;

  Widget build(BuildContext context) {
    List_Criteria = Padding(
      padding: EdgeInsets.all(10.0),
      child: ExpansionPanelList(
        expansionCallback: (int index, bool isExpanded) {
          setState(() {
            print(getItemList()[index].isExpanded);
            getItemList()[index].isExpanded = !getItemList()[index].isExpanded;
          });
        },
        children: getItemList().map((NewItem item) {
          return ExpansionPanel(
            headerBuilder: (BuildContext context, bool isExpanded) {
              return MyListTile(header: item.header,);
            },
            canTapOnHeader: true,
            isExpanded: item.isExpanded,
            body: item.body,
          );
        }).toList(),
      ),
    );

    return Container(
      child: List_Criteria,
    );
  }
}
到目前为止,这就是我的代码

最佳答案

小提示:不要调用List_Criteria变量

Class members, top-level definitions, variables, parameters, and named parameters should capitalize the first letter of each word except the first word, Effective Dart: Style


这是您问题的答案:
    import 'package:flutter/material.dart';

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

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          home: Scaffold(
            body: SafeArea(
              child: SingleChildScrollView(
                child: ExpansionListExample(transactions: [
                  MoneyTransactionModel(productId: 'id-1'),
                  MoneyTransactionModel(productId: 'id-2'),
                  MoneyTransactionModel(productId: 'id-3'),
                  MoneyTransactionModel(productId: 'id-4'),
                ]),
              ),
            ),
          ),
        );
      }
    }

    class ExpansionListExample extends StatefulWidget {
      final List<MoneyTransactionModel> transactions;
      ExpansionListExample({
        Key key,
        @required this.transactions,
      }) : super(key: key);

      ExpansionListExampleState createState() => ExpansionListExampleState();
    }

    class ExpansionListExampleState extends State<ExpansionListExample> {
      List<bool> openList;

      @override
      void initState() {
        openList = List.filled(widget.transactions.length, false);
        super.initState();
      }

      Widget build(BuildContext context) {
        return Container(
            child: Padding(
          padding: EdgeInsets.all(10.0),
          child: ExpansionPanelList(
            expansionCallback: (index, isExpanded) {
              setState(() {
                openList[index] = !openList[index];
              });
            },
            children: getItemList(),
          ),
        ));
      }

      List<ExpansionPanel> getItemList() {
        return widget.transactions
            .asMap()
            .map((index, item) {
              return MapEntry(
                  index,
                  ExpansionPanel(
                    headerBuilder: (context, isExpanded) {
                      return Text(
                        item.productId,
                      );
                    },
                    canTapOnHeader: true,
                    isExpanded: openList[index],
                    body: Padding(
                      padding: EdgeInsets.all(20.0),
                      child: Column(
                        children: <Widget>[
                          Text('data'),
                          Text('data'),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            children: <Widget>[
                              Text('data'),
                              Text('data'),
                              Text('data'),
                            ],
                          ),
                          Radio(value: null, groupValue: null, onChanged: null),
                          //put the children here
                        ],
                      ),
                    ),
                  ));
            })
            .values
            .toList();
      }
    }

    class MoneyTransactionModel {
      final String productId;

      MoneyTransactionModel({this.productId});
    }

关于flutter - 如何在Flutter中控制扩展面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63572045/

相关文章:

dart - Flutter 旋转木马图像 slider 在点击事件期间打开单独的页面被调用

dart - flutter 复选框不起作用

flutter - 如何从 QuerySnapshot 中获取特定文档的 DocumentSnapshot?

flutter - 是否可以读取由 FittedBox 设置的文本小部件的字体大小?

Flutter-如何在一行中的特定位置对齐按钮?

flutter - 如何在 Sweep Gradient 中包含 Stroke Cap?

Flutter - 如何在横向模式下打开全屏键盘

flutter - 如何使用Multipart上传图像文件?

Flutter TextSpan 中的手势检测

json - 我该如何处理 Dart throw 问题?