Блог

Я пытаюсь добавить отступы к строкам моей таблицы.

Это то, что у меня есть:

 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'.
  

Как я могу добавить дополнение к моей таблице / TableRows?

Что я обнаружил работающим в этом случае (когда вы хотите добавить отступы между строками в таблице), так это обернуть Text Widget с помощью 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), , он добавляет отступы ко всей строке.

• Добавление пространства Между 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),
            ]
          )
        ],
      ),
    )
    );
  

Лучший способ, который я нашел на данный момент (на самом деле единственный способ), заключался в добавлении контейнера-заполнителя некоторой высоты. Это заставляет строку быть по крайней мере такой высоты. Затем вы можете захотеть установить относительный размер этого столбца на что-то небольшое.

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

используйте поле размера

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

потому что TableRow не относится к типу виджетов. вы можете использовать это

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