Есть ли способ автоматически изменять высоту строк виджета Table на основе доступного пространства во Flutter? - PullRequest
Новая
       82

Есть ли способ автоматически изменять высоту строк виджета Table на основе доступного пространства во Flutter?

0 голосов
/ 05 мая 2020

Я пытался создать таблицу во Flutter с помощью виджета «Таблица» и заставить ее расширяться до нижней части экрана без необходимости прокрутки для просмотра всей таблицы. Однако кажется, что виджеты Text заставляют строки иметь определенную c высоту, что приводит к переполнению последних строк.

Интересное примечание: виджет Expanded, в котором находится таблица, не переполняет экран, поэтому сообщение об ошибке не отображается, даже если таблица выходит за пределы расширенного виджета. Вместо этого кажется, что таблица в расширенном виджете переполняется.

Пример кода: 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter table example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter table example'),
        ),
        body: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(4.0),
              child: Image.network('https://imgs.xkcd.com/comics/minifigs.png'),
            ),
            Expanded(
              child: Container(
                padding: const EdgeInsets.all(6.0),
                child: Table(
                  columnWidths: {
                    0: FlexColumnWidth(1),
                    1: FlexColumnWidth(2),
                    2: FlexColumnWidth(2),
                  },
                  border: TableBorder(
                      horizontalInside: new BorderSide(color: Colors.grey[300], width: 1)
                  ),
                  defaultVerticalAlignment: TableCellVerticalAlignment.middle,
                  children:
                  List<TableRow>.generate(10, (int i){
                    return TableRow(
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(
                              (1990 + i).toString(),
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 14,
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(
                              'Normal people',
                              textAlign: TextAlign.center,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(
                              'Lego people',
                              textAlign: TextAlign.center,
                            ),
                          ),
                        ]
                    );
                  }),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

И вывод:

Скриншот примера приложения с таблица переполнения

1 Ответ

0 голосов
/ 05 мая 2020

Надеюсь, это поможет 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter table example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter table example'),
        ),
        body: Container(
          child: ListView(
            shrinkWrap:true,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(4.0),
                child:
                    Image.network('https://imgs.xkcd.com/comics/minifigs.png'),
              ),
                 Container(
                  padding: const EdgeInsets.all(6.0),
                  child: Table(
                    columnWidths: {
                      0: FlexColumnWidth(1),
                      1: FlexColumnWidth(2),
                      2: FlexColumnWidth(2),
                    },
                    border: TableBorder(
                        horizontalInside:
                            new BorderSide(color: Colors.grey[300], width: 1)),
                    defaultVerticalAlignment: TableCellVerticalAlignment.middle,
                    children: List<TableRow>.generate(20, (int i) {
                      return TableRow(children: [
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(
                            (1990 + i).toString(),
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 14,
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(
                            'Normal people',
                            textAlign: TextAlign.center,
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(
                            'Lego people',
                            textAlign: TextAlign.center,
                          ),
                        ),
                      ]);
                    }),
                  ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
...