如何在flutter中添加ExpansionPanel之间的间隙？

Question

我有一个 ExpansionPanelList，我想在未展开时在扩展图块之间创建一个间隙而不是分隔线。只有一个选项可以添加标高，但不能添加边距到 ExpansionPanelList

\n

这是我使用过的代码：

\n

ExpansionPanelList(\n  expansionCallback: (int index, bool isExpanded) {\n    setState(() {\n      orders[index].isExpanded = !orders[index].isExpanded;\n    });\n  },\n  children: orders.map((OrderDetails order) {\n    return ExpansionPanel(\n      headerBuilder: (context, isExpanded) {\n        return InkWell(\n          onTap: () {\n            Navigator.push(\n                context,\n                MaterialPageRoute(\n                    builder: (context) => TrackOrder(\n                      orderID: order.orderID,\n                      total: order.total,\n                    )));\n          },\n          child: Row(\n            children: <Widget>[\n              Container(\n                margin: EdgeInsets.all(20),\n                decoration: BoxDecoration(\n                    color: MyColors.PrimaryColor.withOpacity(\n                        0.2),\n                    borderRadius: BorderRadius.circular(50)),\n                child: IconButton(\n                  onPressed: () {},\n                  icon: Icon(\n                    CupertinoIcons.cube_box_fill,\n                    color: MyColors.PrimaryColor,\n                    size: 22,\n                  ),\n                ),\n              ),\n              Column(\n                crossAxisAlignment: CrossAxisAlignment.start,\n                children: <Widget>[\n                  Text(\n                    \'Order #${order.orderID}\',\n                    style: TextStyle(\n                        color: Colors.black,\n                        fontSize: 18,\n                        fontWeight: FontWeight.bold),\n                  ),\n                  SizedBox(\n                    height: 4,\n                  ),\n                  Row(\n                    children: [\n                      Text(\n                        \'Total: \',\n                        style: TextStyle(\n                          color: Colors.black,\n                          fontSize: 13,\n                        ),\n                      ),\n                      Text(\n                        \'\xe2\x82\xb9${order.total}\',\n                        style: TextStyle(\n                            color: Colors.black,\n                            fontSize: 13,\n                            fontWeight: FontWeight.w800),\n                      ),\n                    ],\n                  ),\n                ],\n              )\n            ],\n          ),\n        );\n      },\n      isExpanded: order.isExpanded,\n      body: Container(\n        padding: EdgeInsets.symmetric(horizontal: 15),\n        width: MediaQuery.of(context).size.width,\n        height: 100,\n        decoration: BoxDecoration(\n          color: Colors.white,\n        ),\n        child: Row(\n          mainAxisSize: MainAxisSize.max,\n          mainAxisAlignment: MainAxisAlignment.spaceBetween,\n          children: [\n            Row(\n              mainAxisSize: MainAxisSize.max,\n              children: [\n                Image.network(\n                  order.image,\n                  width: 60,\n                  height: 60,\n                  fit: BoxFit.fill,\n                ),\n                SizedBox(width: 15,),\n                Column(\n                  mainAxisSize: MainAxisSize.min,\n                  crossAxisAlignment: CrossAxisAlignment.start,\n                  children: [\n                    Text(\n                      order.productTitle,\n                      style: TextStyle(\n                        fontFamily: \'Poppins\',\n                        fontWeight: FontWeight.bold,\n                      ),\n                    ),\n                    Text(\n                      \'Price: ${order.price}\',\n                      style: TextStyle(\n                        fontFamily: \'Poppins\',\n                      ),\n                    ),\n                    Text(\n                      \'Quantity: ${order.quantity}\',\n                      style: TextStyle(\n                        fontFamily: \'Poppins\',\n                      ),\n                    )\n                  ],\n                )\n              ],\n            ),\n            Text(\n              \'Status: ${order.type}\',\n              style: TextStyle(\n                color: MyColors.PrimaryColor,\n              ),\n            )\n          ],\n        ),\n      ), \n    );\n  }\n).toList(),\n),\n

\n

现在的情况是这样的：

\n

但我希望即使在未展开时也能看起来像这样，请注意瓷砖之间的间隙：

\n

Answer 1

您可以ExpansionTile在里面使用ListView而不是ExpansionPanelList小部件

请参阅此链接https://esflutter.dev/docs/catalog/samples/expansion-tile-sample了解 ExpansionTile。

添加Padding以ListView获得每块瓷砖之间的间隙。

 body: ListView.builder(
          itemBuilder: (BuildContext context, int index) =>
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: EntryItem(data[index]
                ),
              ),
          itemCount: data.length,
        ),

然后ExpansionTile用Card

Widget _buildTiles(Entry root) {
    if (root.children.isEmpty) return ListTile(title: Text(root.title));
    return Card(
      child: ExpansionTile(
        key: PageStorageKey<Entry>(root),
        title: Text(root.title),
        children: root.children.map(_buildTiles).toList(),
      ),
    );
  }