在Flutter中创建对齐文本的表格/表格

Question

G'day！

我想在Flutter中创建以下非常简单的表。基本上是两列文字，左列右对齐，右列左对齐。如果右列具有多个名称，则每一行都将顶部对齐。

左列应自动调整为最大项目的大小（因为每个标题都会有翻译字符串），剩下的空间留给右列名称。

黑色边框和内部虚线边框不是必需的，仅用于显示对齐方式。该文本也只是示例文本。

我可以在2分钟内使用带有GridRow和GridColumn定义的Grid在c＃xaml中创建此文件，但是在Flutter中似乎非常困难。我试过使用表，数据表和列/行，但是没有一个会像这样对齐。

确定这是显示数据的一种相当普遍的方式吗？

任何帮助将不胜感激！

谢谢！达米安

Answer 1

我们可以使用Table小部件获得所需的结果。

对于第一列要左对齐，第二列要右对齐，尽管我没有找到对我们有用的Table小部件的任何内置属性，但是我们仍然可以使用Container小部件并使用padding和alignment分别使每个TableRow的左右对齐，如下所示：

TableRow( children: [
                Column(
                  children:[
                  Container(
                    padding: EdgeInsets.all(5),
                  alignment: Alignment.centerRight,
                    child: Text('Officers:')
                  )
                ]),
                Column(children:[
                  Container(
                  padding: EdgeInsets.all(5),
                  alignment: Alignment.centerLeft,
                    child: Text('Michael')
                  )
                ]),
              ]),
              TableRow( children: [
                Column(
                  children:[
                  Container(
                    padding: EdgeInsets.all(5),
                  alignment: Alignment.centerRight,
                    child: Text('Explorers:')
                  )
                ]),
                Column(children:[
                  Container(
                  padding: EdgeInsets.all(5),
                  alignment: Alignment.centerLeft,
                    child: Text('James Smith \nFred Jones')
                  )
                ]),
              ]),

这将呈现为：

• 对于每行的顶部对齐，我们将使用Table's defaultVerticalAlignment: TableCellVerticalAlignment.top属性，以便在右列中有多个值的情况下，该行将顶部对齐：

• 为了使左列根据其中的数据自动调整大小，我们将使用columnWidth属性，该属性以key value对作为输入来代表表中的每一行，并传递IntrinsicColumnWidth()来调整列的大小根据其内容的大小，如下：

columnWidths: {
                  0: IntrinsicColumnWidth(),
                  1: IntrinsicColumnWidth()
                },

这将完整的表呈现为：

希望这能回答您的问题。