在Flutter中的TableRows之间添加一些空间

Question

我正在Flutter中创建一个包含一些TableRows的表，我只想在这些行之间添加一些空间。

select frame     css=.calculator-frame
click button     css=.btn-dark

Answer 1

可能不是最有效的方法，但是您可以将TableRow包装在填充类中

Padding(
  padding: EdgeInsets.all(8.0),
  child: const Card(child: Text('Hello World!')),
)

类似的东西：

Table(
  columnWidths: {0: FractionColumnWidth(.4)},
  children:[
    TableRow(children: [
      Padding(
      padding: EdgeInsets.symmetric(vertical: 8.0)
      child: Text(
        'Original Title',
      )),
      Padding(
      padding: EdgeInsets.symmetric(vertical: 8.0)
      child: Text(
        original_title,
      )),
    ]),
    TableRow(children: [
      Padding(
      padding: EdgeInsets.symmetric(vertical: 8.0)
      child: Text(
        'Original Language',
      )),
      Padding(
      padding: EdgeInsets.symmetric(vertical: 8.0)
      child: Text(
        original_language,
      )),
    ]),
  ],
);

填充类：

• https://api.flutter.dev/flutter/widgets/Padding-class.html

EdgeInsets类：

• https://api.flutter.dev/flutter/painting/EdgeInsets-class.html

Answer 2

这就是我的做法。

创建一个常量，假设rowSpacer为

const rowSpacer=TableRow(
                  children: [
                      SizedBox(
                      height: 8,
                      ),
                      SizedBox(
                      height: 8,
                      )
                ]);

请记住上面要添加的SizedBox小部件的数量应与表中的列数相同。对于这种情况，我有2个列，因此有2个SizedBoxes。

现在使用此常量在行之间给出间距。

              Table(
                  children: [
                       TableRow(
                          children: [
                            Text('Name:'),
                            Text('Aman kumar')
                            ]),
                       rowSpacer,                        //Using the Constant
                       TableRow(
                           children: [
                             Text('Date of Birth:'),
                             Text('September 27, 1998')
                            ]),
                   )

Answer 3

您最容易做的就是用如下的Padding包装每个表单元格的内容：

    TableRow   (children: [
              TableCell(
                child:Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(EMAIL,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,


                  ),),
                ),
              ),
              TableCell(
                  child:Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(authUser.email),
                  )
              ),
            ])