颤动：使用按钮扩展列表视图

Question

我有一个列表视图，显示所有已完成的发票，我想在用户点击列表视图时显示一个按钮。像这样：

我是 flutter 的新手 .. 如果有人有样品 非常感谢。

final sales = new Container(
    height: 500,
    color: Colors.white,
    alignment: Alignment.center,
    child: ListView.builder(
      scrollDirection: Axis.vertical,
      //   physics: AlwaysScrollableScrollPhysics(),
      shrinkWrap: true,
      itemCount: salesr == null ? 0 : salesr.length,
      padding: EdgeInsets.all(2.0),

      itemBuilder: (BuildContext context, int index) {
        return 
        Container(
            decoration: BoxDecoration(
              border: Border(bottom: BorderSide()),
            ),
            child: ListTile(
                title: new Text(
                  "# " + salesr[index]["outgoing_code"],
                  style: new TextStyle(fontSize: 16.0, color: Colors.green),
                ),
                subtitle: new Text(
                  salesr[index]["customer_name"],
                  style: new TextStyle(fontSize: 14.0),
                ),

                trailing: new Text(
                  salesr[index]["outgoing_totalAll"],
                  style: new TextStyle(
                      fontStyle: FontStyle.normal,
                      color: Colors.red,
                      fontSize: 16.0),
                ),
                onTap: () {
                  print(salesr[index]["customer_name"]);
                }));
      },
    ));

Answer 1

您可以使用 Visibility 展开或折叠列表视图。 这是我为您制作的示例代码：

@override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        height: 500,
        color: Colors.white,
        alignment: Alignment.center,
        child: ListView.builder(
          scrollDirection: Axis.vertical,
          //   physics: AlwaysScrollableScrollPhysics(),
          shrinkWrap: true,
          itemCount: salesr == null ? 0 : salesr.length,
          padding: EdgeInsets.all(2.0),

          itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
              onTap: () {
                setState(() {
                  if (selected != salesr[index])
                    selected = salesr[index];
                  else
                    selected = null;
                });
              },
              child: Column(
                children: [
                  Row(
                    children: [
                      CircleAvatar(
                        child: Center(
                          child: Text(
                            salesr[index][0].toUpperCase(),
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                      ),
                      SizedBox(
                        width: 8,
                      ),
                      Expanded(child: Text(salesr[index])),
                    ],
                  ),
                  Visibility(
                    visible: selected == salesr[index],
                    child: Row(
                      children: [
                        Expanded(
                          child: IconButton(
                            icon: Row(
                              children: [
                                Icon(Icons.info),
                                Row(
                                  children: [
                                    Text('Details'),
                                  ],
                                )
                              ],
                            ),
                            onPressed: () {},
                          ),
                        ),
                        Expanded(
                          child: IconButton(
                            icon: Row(
                              children: [
                                Icon(Icons.message),
                                Row(
                                  children: [
                                    Text('All Invoices'),
                                  ],
                                )
                              ],
                            ),
                            onPressed: () {},
                          ),
                        ),
                      ],
                    ),
                  ),
                  Divider(),
                ],
              ),
            );
          },
        ),
      ),
    );
  }