headers 的 ExpansionPanel 未正确对齐

Question

我正在尝试构建数据 Table 变体，以便可以使用额外信息扩展该行。我没有找到使用 DataTable class.

执行此操作的方法

这是我的：

class TestPanel extends StatefulWidget {
  const TestPanel({Key? key}) : super(key: key);

  @override
  _TestPanelState createState() => _TestPanelState();
}

class _TestPanelState extends State<TestPanel> {
  bool _customTileExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(10),
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: const <Widget>[
                  Expanded(
                    child: Text("Header 1"),
                  ),
                  Expanded(
                    child: Text("Some Header 2"),
                  ),
                  Expanded(
                    child: Text(""),
                  )
                ],
              ),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: 1,
                itemBuilder: (BuildContext context, int index) {
                  return ExpansionPanelList(
                    animationDuration: Duration(milliseconds: 1000),
                    dividerColor: Colors.grey,
                    elevation: 1,
                    children: [
                      ExpansionPanel(
                        body: Container(
                          padding: EdgeInsets.all(10),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                               "Some text here",
                                style: TextStyle(
                                    color: Colors.grey[700],
                                    fontSize: 15,
                                    letterSpacing: 0.3,
                                    height: 1.3),
                              ),
                            ],
                          ),
                        ),
                        headerBuilder: (BuildContext context, bool isExpanded) {
                          return Container(
                            padding: EdgeInsets.all(10),
                            child: Row(
                              children: const <Widget>[
                                Expanded(
                                  child: Text("Value 1"),
                                ),
                                Expanded(
                                  child: Text("Some Value 2"),
                                ),
                              ],
                            ),
                          );
                        },
                        isExpanded: _customTileExpanded,
                      )
                    ],
                    expansionCallback: (int item, bool expanded) {
                      setState(() => _customTileExpanded = !expanded);
                    },
                  );
                },
              ),
            ),
          ],
        ),
    );
  }
}

现在结果是：

如您所见，headers 的对齐方式不正确。我不知道如何确保它们始终对齐。

Answer 1

这里有一个棘手的解决方案，即在 header 行的末尾添加与 ExpansionPanelList 图标宽度相同的 SizedBox“包括它的填充”，如下所示：

Row(
    children: [
      Expanded(
        child: Row(
          children: const <Widget>[
            Expanded(
              child: Text("Header 1"),
            ),
            Expanded(
              child: Text("Some Header 2"),
            ),
          ],
        ),
      ),
      // If the Header text "Some Header 2" is longer than the Expansion Header "Some Value 2" you'll need to increase the Sizedbox width.
      const SizedBox(
        64, //ExpansionPanelList IconContainer size: end margin 8 + padding 16*2 + size 24
      ),
    ],
  ),

此外，我不知道这是否符合您的想法，但您可以使用 DataTable2 包获得动态行高，但首先您需要复制包代码并将其粘贴到您的根目录中当前项目对其进行一些编辑“使行的高度动态化”：

为了让动态行高从新的小部件文件中删除 height: effectiveDataRowHeight 和 height: effectiveHeadingRowHeight。
您可以添加 constraints: BoxConstraints(minHeight: effectiveHeadingRowHeight,) 和 constraints: BoxConstraints(minHeight: effectiveDataRowHeight,) 而不是上面的内容，并使用 dataRowHeight 参数作为最小高度，同样用于 headingRowHeight。
要使单元格中的所有数据居中，请在小部件代码中将 defaultVerticalAlignment: TableCellVerticalAlignment.middle 添加到 var dataRows。

结果： Image

你也可以对数据表做同样的事情class，但是在第3步，你需要将defaultVerticalAlignment: TableCellVerticalAlignment.middle添加到图像中的Table child：Image

我更喜欢使用 DataTable2，因为它有更多自定义功能，您可以在这里找到它：DataTable2

之后，您可以在行尾添加图标。如果单击它，您将添加包含额外信息的新行。

headers 的 ExpansionPanel 未正确对齐

ExpansionPanel with headers is not correctly aligned

flutter

flutter-layout