在 Flutter 中展开 DataTable 以填充高度

Question

我有颤振问题。 我需要在屏幕的高度填充一个数据表。

我尝试在 Flex 小部件中添加数据表，但没有得到任何更改。

当我设置容器的高度时，让我在屏幕按钮处留出一个空白

谢谢！我很抱歉我的英语很差

这是我的代码：

products.addAll(Product.getExampleList());

var table =

Container(
  child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child:SizedBox(
            child:
            Column(
              children: <Widget>[
                DataTable(
                    columns: <DataColumn>[
                      DataColumn(
                          label: Text("Código")
                      ),
                      DataColumn(
                        label: Text("Precio"),
                        numeric: true,
                      ),
                      DataColumn(
                          label: Text("Grupo")
                      ),
                      DataColumn(
                          label: Text("Descripción")
                      ),
                    ],
                    rows:
                    products.map<DataRow>((Product element) {
                      return DataRow(
                        key: Key(element.idProduct.toString()),
                        cells: <DataCell>[
                          DataCell(Text(element.code)),
                          DataCell(Text("\$ " + element.price.toStringAsFixed(2))),
                          DataCell(Text(element.group)),
                          DataCell(Text(element.description))
                        ],
                      );
                    }).toList()
                ),
              ],
            )
        ),
      ),
);


return  Container(
    color: Colors.white24,
    child:
      Column(
      children: <Widget>[
        Container(
          padding: EdgeInsets.all(10),
          child: Row(

            children: <Widget>[

              Text("Código: "),
              Flexible(
                child: TextField(
                  controller: tController,
                  decoration: InputDecoration(
                      hintText: "Ingrese Código"
                  ) ,
                ),
              ),
              RaisedButton(
                onPressed: onPressedSearch,
                child: Text("Buscar"),
              )
            ],
          ),
        ),
        Flex(
          direction: Axis.vertical,
          children: <Widget>[
            table
          ],
        ),
      ],
    )
);

Answer 1

您可以设置

dataRowHeight

的

headingRowHeight

和

DataTable

属性，使其高度等于屏幕高度。

your_number_of_rows = 4;
rowHeight = (MediaQuery.of(context).size.height - 56) / your_number_of_rows;

DataTable(dataRowHeight: rowHeight, headingRowHeight: 56.0, columns: ...)

Answer 2

根据官方文档，参数

dataRowHeight

已被弃用，如下所示。

dataRowHeight

已弃用，不应使用。迁移使用 而是使用 dataRowMinHeight 和 dataRowMaxHeight。这个功能是 v3.7.0-5.0.pre 之后已弃用。

所以你应该使用

DataTable(          
         dataRowMinHeight: 25.0,
         dataRowMaxHeight: 28.0,
...

Answer 3

通过设置 dataRowMaxHeight: double.infinity 会帮助你..

          DataTable(
          sortAscending: true,
          columnSpacing: 2.0,
          dataRowMaxHeight: double.infinity,       // Code to be changed.
          dataRowMinHeight: 60,                    // Set the min required height.
          dividerThickness: 1,
          columns: <DataColumn>[
            DataColumn(
                label: Expanded(
              child: Container(
                width: 100,
                child: Text(
                  'Account Type',
                  textAlign: TextAlign.center
                ),
              ),
            ))]),