时间戳

首页 > 解决方案 > Flutter 分页数据表填充高度

flutter - Flutter 分页数据表填充高度

问题描述

我正在尝试创建Paginated Data Table以填充高度。但是，无论我尝试什么似乎都不起作用。我怎样才能让桌子填满高度？另外，如何更改分页背景颜色？

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(state.department.name),
      ),
      body: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              TextButton(onPressed: () {}, child: Text('TEst 1')),
              TextButton(onPressed: () {}, child: Text('TEst 1'))
            ],
          ),
          Container(
            child: PaginatedDataTable(
                showCheckboxColumn: false,
                headingRowHeight: 35,
                columns: const <DataColumn>[
                  DataColumn(
                    label: Text(
                      'First Name',
                      style: TextStyle(fontStyle: FontStyle.italic),
                    ),
                  ),
                  DataColumn(
                    label: Text(
                      'Last Name',
                      style: TextStyle(fontStyle: FontStyle.italic),
                    ),
                  ),
                  DataColumn(
                    label: Text(
                      'Id',
                      style: TextStyle(fontStyle: FontStyle.italic),
                    ),
                  ),
                  DataColumn(
                    label: Text(
                      'Time',
                      style: TextStyle(fontStyle: FontStyle.italic),
                    ),
                  ),
                  DataColumn(
                    label: Text(
                      'Operator',
                      style: TextStyle(fontStyle: FontStyle.italic),
                    ),
                  ),
                ],
                source: tableSource
            ),
          )
        ],
      ),
    );
  }

随着Container容器本身的高度被填满，但分页数据表没有。

标签： flutter

解决方案

解决方案

  static const double topViewHeight = 50.0;
  static const double paginateDataTableHeaderRowHeight = 35.0;
  static const double pagerWidgetHeight = 56;
  static const double paginateDataTableRowHeight = kMinInteractiveDimension;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello'),
      ),
      body: LayoutBuilder(
        builder: (context, constraint) {
          return Column(
            children: <Widget>[
              Container(
                width: constraint.maxWidth,
                height: topViewHeight,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    TextButton(onPressed: () {}, child: Text('TEst 1')),
                    TextButton(onPressed: () {}, child: Text('TEst 1'))
                  ],
                ),
              ),
              Container(
                  color: Colors.greenAccent,
                  height: constraint.maxHeight - topViewHeight,
                  child: Center(
                    child: PaginatedDataTable(
                        showCheckboxColumn: false,
                        headingRowHeight: paginateDataTableHeaderRowHeight,
                        rowsPerPage: ((constraint.maxHeight -
                                    topViewHeight -
                                    paginateDataTableHeaderRowHeight -
                                    pagerWidgetHeight) ~/
                                paginateDataTableRowHeight)
                            .toInt(),
                        columns: const <DataColumn>[
                          DataColumn(
                            label: Text(
                              'First Name',
                              style: TextStyle(fontStyle: FontStyle.italic),
                            ),
                          ),
                        ],
                        source: TableSource()),
                  ))
            ],
          );
        },
      ),
    );
  }

需要知道

笔记：

  1. 列是一个无限的高度约束，因此它不适合适合高度。

  2. 如果，您扭曲 SingleChildScrollViewWidget 内的列以避免约束错误和警告

推荐阅读