如何在 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")],
  ),
);