Flutter 如何在展开的列表视图中

Question

Hello good day everyone i want to make my listview into a expanded listview i pull my data using mysql i want to display first the transaction id and the vesselname then in the side it has it mut have a arrow that when you click it it will show other information details.

  Widget build(BuildContext context) {
        return Scaffold(
            body: RefreshIndicator(
          onRefresh: getData,
          key: _refresh,
          child: loading
              ? Center(child: CircularProgressIndicator())
              : ListView.builder(
                  itemCount: list.length,
                  itemBuilder: (context, i) {
                    final x = list[i];
                    debugPrint(x.toString());
                    return Container(
                      padding: EdgeInsets.all(20.0),
                      child: Row(
                        children: <Widget>[
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                            the data will be shown first is transaction id and vessel name a arrow icon on the side when it is click it will show the other information
                          Text(
                              'Transaction ID:\t' + x.transaction_id,
                              style: TextStyle(
                                  fontSize: 20.0, fontWeight: FontWeight.bold),
                            ),
                            Text('Vessel Name:\t' + x.vesselname,
                                style: TextStyle(fontSize: 20.0)),

//this will be the the information displayed after the side arrow will be click

     Text('Type of Port :\t' + x.typeofport.capitalize(),
                            style: TextStyle(fontSize: 20.0)),
                        Text('Vessel Number:\t' + x.voyageno,
                            style: TextStyle(fontSize: 20.0)),
                        Text('Ship Call #:\t' + x.scn,
                            style: TextStyle(fontSize: 20.0)),
                        Text('OR #:\t' + x.ornum,
                            style: TextStyle(fontSize: 20.0)),
                        Text(
                            'Amount:\t ' +
                                money.format(int.parse(x.payment)),
                            style: TextStyle(fontSize: 20.0)),
                        Text('Status:\t' + x.status.toUpperCase(),
                            style: TextStyle(
                                fontSize: 25.0,
                                fontWeight: FontWeight.bold,
                                color: x.status == 'pending'
                                    ? Colors.red
                                    : Colors.green)),
                        Divider()
                      ],
                    ),
                  ),
                ],
              ),
            );
          },
        ),
));

} }

Answer 1

在颤动中探索ExpansionTile ，我认为它符合您的要求。

Answer 2

first when you fetch data in your DTO you can put bool variable inside or you can remap your DTO and put variable bool so your variable inside somehow like this:

Map<DTO, bool> 

or

DTO{
    ........, bool collapsed;
}

then in your code when you create your builder

final x = list[i]; >> changed to entries if you used Map [final x = mapData[i].entries.toList()]

return Container(
padding: EdgeInsets.all(20.0),
child: GestureDetector(
onTap: (){
    setState({
        // if you using Map
        x[i] = !x.value;

    // if you using DTO
    x.collapsed = !x.collapsed;
    });

},
    child: Column(
        children:[
            // Your Header
            Row(
children: <Widget>[
  Expanded(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
    the data will be shown first is transaction id and vessel name a arrow icon on the side when it is click it will show the other information
  Text(
      'Transaction ID:\t' + x.transaction_id,
      style: TextStyle(
          fontSize: 20.0, fontWeight: FontWeight.bold),
    ),
    Text('Vessel Name:\t' + x.vesselname,
        style: TextStyle(fontSize: 20.0)),

        ]

        // Your Detail
        // [if you used DTO]
        if(!x.collapsed) Container(child:.......)


        // [if you used Map]
        if(!x.value) Container(child:......)
    )

)

this is only the logic of changing the list inside to become Collapsible listView