Question

在颤动中，我想在卡片小部件中嵌入一个扩展面板，就像在图像中一样。我尝试在卡中添加扩展面板，但它没有用完，也无法更改卡小部件的边框半径。

Answer 1

您尚未真正问过一个问题，但提出了两个问题：

我试图在卡中添加扩展面板，但是没有用出来。
无法更改卡片小部件的边框半径。

我会尽力解决这两个问题。

问题1

请详细说明没有解决问题吗？可以将扩展面板添加到卡中。如下：

Widget build(BuildContext context) {
  return Card(
          child: ExpansionPanelList(
            children: <ExpansionPanel>[
              new ExpansionPanel(
                headerBuilder: (BuildContext context, bool isExpanded) =>
                    const Text("header data"),
                body: const Text("Body data"),
                isExpanded: false,
              ),
            ],
          ),);
}

在此示例中，扩展列表将显示标题，但单击右侧的箭头时将不执行任何操作。为此，包含的小部件必须是stateful widget。轻敲标题后，isExpanded的状态应更改。实现如下：

class MyWidget extends StatefulWidget {
  MyWidgetState createState() => new MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  bool isExpanded;

  @override
  void initState() {
    this.isExpanded = false;
    super.initState();
  }

  Widget build(BuildContext context) {
    return Card(child: ExpansionPanelList(
            expansionCallback: (int index, bool isExpanded) {
              setState(() {
                this.isExpanded = !isExpanded;
              });
            },
            children: <ExpansionPanel>[
              new ExpansionPanel(
                headerBuilder: (BuildContext context, bool isExpanded) =>
                    const Text("header data"),
                body: const Text("Body data"),
                isExpanded: this.isExpanded,
              ),
            ],
        );
  }
}

请理解，这是卡顶部的可扩展面板。卡和可扩展面板均具有高度。

问题2

您可以如下更改卡的边界半径：

Card(shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15.0),),
     child: child),
);

但是，如果可扩展面板在卡的顶部，则其半径将几乎为正方形（默认），因此卡的底部将为正方形而不是圆形。原因是卡的底部显示了可扩展面板。卸下面板，您将看到圆角

颤动 - 在卡片小部件中嵌入扩展面板

1 个答案: