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

Question

我有一个 ExpansionPanelList，我想在扩展 block 未展开时创建一个间隙而不是分隔线。只有一个选项可以向 ExpansionPanelList 添加高度而不是边距

这是我使用的代码:

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

现在是这样的:

但即使它没有展开，我也想看起来像这样，请注意图 block 之间的间隙:

Answer 1

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

引用此链接 https://esflutter.dev/docs/catalog/samples/expansion-tile-sample对于 ExpansionTile。

为 ListView 添加 Padding 以获得每个图 block 之间的间隙。

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

然后用Card包裹ExpansionTile

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