Question

因此，我有一个由另一个列表构成的元素列表。该列表位于expansionPanels列表中。

我无法扩大和缩小面板。有人可以帮忙吗？

此外，我还是一个新手，可以随时提供一种更好的方法。

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,
    );
  }
}

这是我到目前为止的代码

Answer 1

小说：不要调用变量List_Criteria

类成员，顶级定义，变量，参数和命名参数应大写每个单词的首字母，除非第一个单词 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中控制扩展面板

1 个答案: