如何在 Flutter 中将圆形边框应用于扩展的 ExpansionTile？

Question

我想要做的是将圆形边缘应用于整个图块，即使子项内部的容器打开，与折叠时的方式相同。 我尝试使用 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,
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

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

Answer 2

就我而言，我在卡上使用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")],
  ),
);