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

Question

天啊!

我想在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()
                },

这会将完整表呈现为:



希望这能回答您的问题。