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

在这种情况下（当您想在表中的行之间添加填充时），我发现可以用Text包装Container小部件并将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。首先用Text包装Container小部件，并赋予第一个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

您可以使用“填充”小部件来包装表格，如下所示：

Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
                  child: Table(
                    children: [
                      TableRow(
                        children: [
                          Text('1'),
                          Text('2'),
                          Text('3'),
                        ],
                      ),
                    ],
                  ),
                ),

Answer 4

因为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 5

到目前为止，我发现最好的方法（实际上只有这样）是添加一定高度的占位符容器。那迫使那排至少要那么高。然后，您可能需要将该列的相对大小设置为较小。

  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!!
    ]);
  }

以下是添加到最终Table小部件中的参数，以使此“假”列非常小（请参阅列索引5）

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

Answer 6

Table子级的类型为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();

向TableRow

6 个答案: