如何将列中的项展开为表- Flutter

yk9xbfzb  于 2023-06-07  发布在  Flutter
关注(0)|答案(2)|浏览(177)

我在SingleChildScrollView中有一个表,因为它是一个包含长文本和两个表的屏幕。在其中一个表中,我需要做一个TableRow,其中该行的第一个子元素是一个Column,第二个子元素是一个包含文本的Container。我试着这样做,但我发现的唯一方法是做一个专栏。Column的容器没有展开。由于表没有大小,我不能使用Expanded/Flexibe扩展容器。
(the文本和表格进入SingleChildScrollView的列)
代码:

Table(
              border: TableBorder.all(),
              children: [
                tableRowTitle("DADO PESSOAL COMPARTILHADO", "FINALIDADE"),
                TableRow(
                  children: [
                    Container(
                      child: Column(
                        children: [
                          containerTableColumn("Nome completo"),
                          containerTableColumn("Endereço"),
                          containerTableColumn("CPF"),
                          containerTableColumn("RG"),
                          containerTableColumn("Número de telefone"),
                          containerTableColumn("E-mail"),
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(10),
                      child: Center(
                        child: Text(
                          "Compartilhamento ... pelo APP.",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 14,
                          ),
                        ),
                      ),
                    )
                  ]
                )
              ],
            )

containerTableColumn(String text){
    return TableCell(
      verticalAlignment: TableCellVerticalAlignment.fill,
      child: Container(
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
            color: Color.fromRGBO(217, 226, 243, 1),
            border: Border.all(color: Colors.black)
        ),
        child: Text(
          text,
          style: TextStyle(
            fontSize: 14,
          ),
        ),
      ),
    );
  }

table怎么样:

我想要这个

我只想扩展这个列的容器,但不可能使用Flexibe/Expanded,有人能帮我吗?

xt0899hw

xt0899hw1#

基本上,你可以使用ListTile:TableCell->Container->ListTile
我创建了一个CustomTableCell作为无状态小部件,这里有一个例子:

class CustomTableCell extends StatelessWidget {
  final String label;
  const CustomTableCell({super.key, required this.label});

  @override
  Widget build(BuildContext context) {
    return TableCell(
      child: Container(
        padding: const EdgeInsets.all(10),
        decoration: BoxDecoration(
            color: const Color.fromRGBO(217, 226, 243, 1), border: Border.all(color: Colors.black)),
        child: ListTile(
          contentPadding: const EdgeInsets.all(0),
          title: Text(
            label,
            style: const TextStyle(
              fontSize: 14,
            ),
          ),
        ),
      ),
    );
  }
}

现在你可以在列中使用它,类似这样:

Column(
        children: const [
          CustomTableCell(label: "Nome completo"),
          CustomTableCell(label: "Endereço"),
          CustomTableCell(label: "CPF"),
          CustomTableCell(label: "RG"),
          CustomTableCell(label: "Número de telefone"),
          CustomTableCell(label: "E-mail"),
        ],
      ),
2skhul33

2skhul332#

也许您可以尝试类似的操作,但这并不使用ContainerTableColumn小部件。

Table(
    children: [
      TableColumn(
        children: [
          TableCell(
            child: Container(
              color: Color.fromRGBO(217, 226, 243, 1),
              child: Text('Nome completo'),
            ),
          ),
          TableCell(
            child: Container(
              color:Color.fromRGBO(217, 226, 243, 1),
              child: Text('Endereço'),
            ),
          ),
         TableCell(
            child: Container(
              color:Color.fromRGBO(217, 226, 243, 1),
              child: Text('CPF'),
            ),
          ),
        ],
      )
    ],
  ),

相关问题