如何在Flutter中为展开的ExpansionTile应用圆角边框？

Question

我想做的是在整个瓦片上应用圆角，即使内部Container展开也是如此，就像折叠时一样。 我尝试通过其Container使用BoxDecoration应用样式，但出现错误。 我不知道该怎么做，因为与ListTile不同，ExpansionTile没有形状的属性。

class DocumentTile extends StatelessWidget {
  final Document document;

  const DocumentTile({Key key, this.document}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.only(top: 12, right: 30),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8.0),
      ),
      color: AppColors.lbBlue.materialColor,
      child: Container(
        width: MediaQuery.of(context).size.width * 0.83,
        child: ExpansionTile(
          tilePadding: const EdgeInsets.only(left: 40.0, right: 30.0),
          backgroundColor: AppColors.nsIconGrey.materialColor,
          trailing: Container(
            width: MediaQuery.of(context).size.width * 0.49,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Container(
                      width: 0.5,
                      height: 50,
                      color: Colors.white,
                      margin: const EdgeInsets.only(right: 16.0),
                    ),
                    Text(
                        '${DateTime.fromMicrosecondsSinceEpoch(document.creationDate * 1000)}',
                        style: tileDate),
                  ],
                ),
                Row(
                  children: [
                    Container(
                        margin: const EdgeInsets.only(right: 6),
                        height: 35,
                        width: 35,
                        decoration: BoxDecoration(
                          color: AppColors.tagIcon.materialColor,
                          borderRadius: BorderRadius.circular(4),
                        ),
                        child: Center(
                          child: Text(
                            '${document.tags[0].acronym}',
                            style: documentTag,
                          ),
                        )),
                    Container(
                        height: 35,
                        width: 35,
                        decoration: BoxDecoration(
                          color: AppColors.addTagIcon.materialColor,
                          borderRadius: BorderRadius.circular(4),
                        ),
                        child: IconButton(
                          icon: Icon(Icons.add, color: Colors.white),
                          iconSize: 25,
                          padding: const EdgeInsets.all(5.5),
                          onPressed: () {},
                        )),
                  ],
                ),
                Row(
                  children: [
                    Container(
                        margin: const EdgeInsets.only(right: 6),
                        height: 35,
                        width: 35,
                        decoration: BoxDecoration(
                          color: AppColors.sPdIcon.materialColor,
                          borderRadius: BorderRadius.circular(4),
                        ),
                        child: IconButton(
                          icon: Icon(Icons.more_vert, color: Colors.white),
                          iconSize: 25,
                          padding: const EdgeInsets.all(5.5),
                          onPressed: () {},
                        )),
                    Container(
                        margin: const EdgeInsets.only(right: 6),
                        height: 35,
                        width: 35,
                        decoration: BoxDecoration(
                          color: AppColors.sPdIcon.materialColor,
                          borderRadius: BorderRadius.circular(4),
                        ),
                        child: IconButton(
                          icon: Icon(Icons.share_outlined, color: Colors.white),
                          iconSize: 20,
                          padding: const EdgeInsets.all(5.5),
                          onPressed: () {},
                        )),
                    Container(
                        height: 35,
                        width: 35,
                        decoration: BoxDecoration(
                          color: AppColors.sPdIcon.materialColor,
                          borderRadius: BorderRadius.circular(4),
                        ),
                        child: IconButton(
                          icon: Icon(Icons.arrow_forward, color: Colors.white),
                          iconSize: 25,
                          padding: const EdgeInsets.all(5.5),
                          onPressed: () {
                            Navigator.pushNamed(context, '/documentDetail',
                                arguments: document.id);
                          },
                        )),
                  ],
                ),
              ],
            ),
          ),
          subtitle: Text(
            '${document.abstract0}',
            style: tileDescription,
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
          ),
          title: Text(
            '${document.title}',
            style: tileTitle,
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
          ),
          children: [
            Container(
              width: double.maxFinite,
              padding: const EdgeInsets.only(
                  left: 40.0, right: 30.0, top: 20, bottom: 20),
              color: Color(0xFF2A3141),
              child: Text(
                '${document.content}',
                style: TextStyle(
                    color: AppColors.darkerText2.materialColor,
                    fontSize: 10,
                    fontWeight: FontWeight.w300),
                maxLines: 3,
                overflow: TextOverflow.ellipsis,
              ),
            )
          ],
        ),
      ),
    );
  }
}

- Bruner4

Answer 1

在我的情况中，我在卡片上使用了clipBehavior: Clip.antiAlias。

例子：

return Card(
  elevation: 0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(8),
  ),
  clipBehavior: Clip.antiAlias,
  margin: EdgeInsets.zero,
  child: const ExpansionTile(
    title: Text("Title"),
    children: [Text("Expanded content")],
  ),
);

- Andrei R

---

伙计，这解决了我的onTap动画超出边界的问题。 - Nikita Shadkov

这应该是2023年的正确答案。 - Alex Rabin

Answer 2

只需使用ClipRRect小部件将其包装起来，它允许您为任何小部件设置边框半径。

- Miguel Ruivo

---

我仍然在使用相同的边框进行onTap动画:/ - Nikita Shadkov

Answer 3

花了一些时间才弄清楚，但这是我的解决方案：

Card(
  child: ExpansionTile(
    collapsedShape: const ContinuousRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(20))
    ),
    shape: const ContinuousRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(20))
    ),
    .
    .
    children: <Widget>[
      ListTile(
        shape: const ContinuousRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20))
        )
      ),
      tileColor: Colors.white,
      .
      .
      ),
    ],
  )
)

最终结果：

- Imran Niloy