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

Question

生日快乐！

我想在 Flutter 中制作以下非常简单的表格。基本上两列文本，左列右对齐，右列左对齐。如果右列有多个名称，则每行顶部对齐。

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

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

我可以在 2 分钟内使用具有 GridRow 和 GridColumn 定义的 Grid 在 c# xaml 中创建它，但在 Flutter 中似乎非常困难。我尝试过使用 Table、DataTable 和 Columns/Rows，但没有一个会像这样对齐。

这肯定是一种相当常见的数据显示方式吗？

任何帮助将不胜感激！

谢谢！ 达米安

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

这会将完整的表格呈现为：

希望这能回答你的问题。