如何在flutter中的ExpansionPanelList中控制扩展面板的状态

时间:2020-08-21 11:10:13

标签: flutter dart flutter-layout

我有一个用于创建扩展面板列表的硬编码虚拟列表。 现在我正在尝试模仿来自API端点的调用。

我对如何控制扩展面板的状态感到困惑。

有人可以分享一下我如何实现这一目标。

到目前为止,这是我尝试使用items作为伪数据的方法,我正尝试使用final List<MoneyTransactionModel> transactions;

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> items = <NewItem>[
    NewItem(
        false,
        'Header',
        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)),
  ];

  Widget List_Criteria;

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

    return Container(
      child: List_Criteria,
    );
  }
}

MoneyTransactionModel看起来像这样。(以了解列表的样子)

class MoneyTransactionModel {
  String id;
  String productId;
  String entryType;
  String quantity;
  String unitPrice;
  String paidBy;
  String createdAt;

  MoneyTransactionModel(
      {this.id,
      this.productId,
      this.entryType,
      this.quantity,
      this.unitPrice,
      this.paidBy,
      this.createdAt});
}

这是交易清单

import '../models/moneyTransaction.dart';

class TransactionService {
  List getMoneyTransactions () {
    return [
      new MoneyTransactionModel (
          id: "1",
          productId: "lime",
          entryType: "sold",
          quantity: "60kg",
          unitPrice: "240rwf/kg",
          paidBy: "mtn",
          createdAt: "2020-04-20T00:15:08.932Z"),
      new MoneyTransactionModel(
          id: "2",
          productId: "lime",
          entryType: "sold",
          quantity: "60kg",
          unitPrice: "240rwf/kg",
          paidBy: "mtn",
          createdAt: "2020-04-20T00:15:08.932Z"),
      new MoneyTransactionModel(
          id: "3",
          productId: "lime",
          entryType: "sold",
          quantity: "60kg",
          unitPrice: "240rwf/kg",
          paidBy: "mtn",
          createdAt: "2020-04-20T00:15:08.932Z"),
      new MoneyTransactionModel(
          id: "4",
          productId: "lime",
          entryType: "sold",
          quantity: "60kg",
          unitPrice: "240rwf/kg",
          paidBy: "mtn",
          createdAt: "2020-04-20T00:15:08.932Z"),
    ];
  }
}

0 个答案:

没有答案