向 TableRow 添加填充

Question

我正在尝试为我的表格行添加填充。

这就是我所拥有的：

var list = (report['items'] as List)
          .map((item) => 
          TableRow(children: [
                Text(item['place']),
                Text(item['type']),
                Text(item['producer']),
                Text(item['serial_number']),
                Text(formatter.format(DateTime.parse(item['next_check_date']))
                    .toString()),
                Text(item['test_result']),
                Text(item['comments']),
              ]))
          .toList();

这是我尝试做的：

var list = (report['items'] as List)
          .map((item) =>
      Container(
          padding: EdgeInsets.only(10.0),
          child: TableRow(children: [
                Text(item['place']),
                Text(item['type']),
                Text(item['producer']),
                Text(item['serial_number']),
                Text(formatter.format(DateTime.parse(item['next_check_date']))
                    .toString()),
                Text(item['test_result']),
                Text(item['comments']),
              ])))
          .toList();

但我收到此错误（在添加带有填充的容器后）：

The argument type 'TableRow' can't be assigned to the parameter type 'Widget'.

如何向我的 Table / TableRows 添加填充？

Answer 1

我发现在这种情况下工作（当您想在表格中的行之间添加填充时）是用 Container 包装 Text Widget 并将 padding 属性添加到您的元素之一（这可能是'最高' 一个）并将alignment 属性用于需要在行内对齐文本的其他容器。我的示例将如下所示（抱歉图像模糊）：

Padding(
  padding: const EdgeInsets.fromLTRB(32.0, 0.0, 32.0, 0.0),
  child: Table(
    columnWidths: {
      0: FractionColumnWidth(.75),
    },
    children: achievementList
        .map(
          (achivement) => TableRow(
            children: [
              Container(
                padding: EdgeInsets.only(bottom: 10.0),
                child: Text(
                  achivement.title,
                  style: TextStyle(
                    fontSize: 16.0,
                  ),
                ),
              ),
              Container(
                alignment: Alignment.centerRight,
                child: Text(
                  achivement.dateString,
                  style: TextStyle(
                    fontSize: 16.0,
                  ),
                ),
              ),
            ],
          ),
        )
        .toList(),
  ),
),

achievementList 是我的对象，title 和 dateString。通过首先用Container 包装Text 小部件并赋予第一个Container 属性padding: EgeInsets.only(bottom: 10.0), 它为整行提供填充。

Answer 2

• 在TableRow 之间添加空格

    final attachmentWidget = Container(
    height: 200,
    width: width,
    decoration: BoxDecoration(
        color: Palette.white,
        borderRadius: BorderRadius.all(Radius.circular(30))),
    child: Center(
      child: Table(
        children: [
          TableRow(
            children: [
              iconColumn(
                  color: Colors.deepPurple,
                  icon: Icons.camera_alt,
                  name: 'Camera',
                  tap: null),
              iconColumn(
                  color: Palette.defaultColor,
                  icon: Icons.photo,
                  name: 'Camera Gallery',
                  tap: null),
              iconColumn(
                  color: Palette.defaultColor,
                  icon: Icons.videocam,
                  name: 'Video',
                  tap: null),
              iconColumn(
                  color: Palette.defaultColor,
                  icon: Icons.photo,
                  name: 'Video Gallery',
                  tap: null),
            ]
          ),
          TableRow(
            children: [
              VerticalSpacing(height: 15),//SizeBox Widget
              VerticalSpacing(height: 15),
              VerticalSpacing(height: 15),
              VerticalSpacing(height: 0),
            ]
          ),
          TableRow(
            children: [
              iconColumn(
                  color: Palette.mediumBlue,
                  icon: Icons.insert_drive_file,
                  name: 'Document',
                  tap: null),
              iconColumn(
                  color: Palette.chatGreen,
                  icon: Icons.audiotrack,
                  name: 'Audio',
                  tap: null),
              iconColumn(
                  color: Palette.chatGreen,
                  icon: Icons.location_on,
                  name: 'Location',
                  tap: null),
              VerticalSpacing(height: 0),
            ]
          )
        ],
      ),
    )
    );

Answer 3

因为 TableRow 不是 Widget 的类型。 你可以用这个

Container(
  padding: EdgeInsets.symmetric(horizontal: 10.0),
  child: Table(
    children: (report['items'] as List)
      .map((item) =>
      TableRow(children: [
        Text(item['place']),
        Text(item['type']),
        Text(item['producer']),
        Text(item['serial_number']),
        Text(formatter.format(DateTime.parse(item['next_check_date']))
            .toString()),
        Text(item['test_result']),
        Text(item['comments']),
      ]))
      .toList()
  ),
);

Answer 4

到目前为止，我发现的最好方法（真正唯一的方法）是添加一个具有一定高度的占位符容器。这迫使该行至少有那么高。然后您可能希望将该列的相对大小设置为较小的值。

  TableRow _buildRow(int index) {
    return TableRow(children: [
      Center(child: Icon(Icons.check_box_outline_blank), ),
      AutoSizeText("Info A", textAlign: TextAlign.center,maxLines: 1,maxFontSize: 20,),
      AutoSizeText("Info B", textAlign: TextAlign.center,maxLines: 1,maxFontSize: 20,),
      CustomTextField(
        controller: _nameController[index],
        keyboardType: TextInputType.text,
        autoFocus: false,
        icon: Icon(Icons.lightbulb_outline),
        hint: "Name",
      ),
      Container(
        height: 40,
        child: RaisedButton(
          onPressed: _pressMe,
          color: Colors.blue,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0))),
          child: AutoSizeText("Press Me",
              maxLines: 1,
              style: TextStyle(fontSize: 20.0, color: Colors.white)),
        ),
      ),
      Container(height: 70,),  // This is the line that helps me!!
    ]);
  }

这里是添加到最终表格小部件的参数，以使这个“假”列非常小（参见列索引 5）

 defaultVerticalAlignment: TableCellVerticalAlignment.middle,
          columnWidths: {0: FractionColumnWidth(.05),
            1: FractionColumnWidth(.125),
            2: FractionColumnWidth(.125),
            3: FractionColumnWidth(.4),
            4: FractionColumnWidth(.2),
            5: FractionColumnWidth(.02)},

Answer 5

Tablechildren 的类型是 List<TableRow>，这意味着列表中的元素必须将 TableRow 作为直接小部件，然后您可以在 TableRow 小部件中添加任何小部件。

在你的情况下：

var list = (report['items'] as List)
          .map((item) =>
     TableRow(children: [
                 Container(
          padding: EdgeInsets.only(10.0),
          child: Text(item['place'])),
                 Container(
          padding: EdgeInsets.only(10.0),
          child: Text(item['type'])),
                 Container(
          padding: EdgeInsets.only(10.0),
          child: Text(item['producer'])),
                 Container(
          padding: EdgeInsets.only(10.0),
          child: Text(item['serial_number'])),
                 Container(
          padding: EdgeInsets.only(10.0),
          child: Text(formatter.format(DateTime.parse(item['next_check_date']))
                    .toString())),
                 Container(
          padding: EdgeInsets.only(10.0),
          child: Text(item['test_result']),
                Text(item['comments'])),
              ]))
          .toList();

Answer 6

使用大小框

TableRow(children: [
                  SizedBox(
                    height: 50.0,
                  ),
                  Icon(FontAwesomeIcons.check,
                      size: 16, color: Colors.green),
                  Text('Testing'),
                ]),