如何在PaginatedDataTable小部件中隐藏空白行?

时间:2020-06-26 18:43:37

标签: flutter dart flutter-layout flutter-web

Blank Rows

每当我将每页的行值设置为大于要在taltal的最后一页显示的其余行的数字时,页面的其余部分将被空白行填充... ................................................... ..... ................................................... .....

       import 'package:flutter/material.dart';
       import 'package:universal_html/html.dart';
       class CustomPaginatedDataTable extends StatefulWidget {
       final String _headerTitle;
       final List<String> _columnsList;
       DataTableSource _source;
     
       CustomPaginatedDataTable(this._headerTitle, this._columnsList, this._source);
     
       @override
       _CustomPaginatedDataTableState createState() =>
           _CustomPaginatedDataTableState();
     }
     
     class _CustomPaginatedDataTableState extends State<CustomPaginatedDataTable> {
       int defRowsPerPage = 5;
       List<int> avaiableRowsPerPage = [5, 10, 20, 30, 40, 50];
       @override
       Widget build(BuildContext context) {
         List<DataColumn> dataColumn = [];
     
         widget._columnsList.forEach(
           (columnTitle) {
             dataColumn.add(
               DataColumn(
                 label: Text(
                   columnTitle,
                   style: TextStyle(
                       color: Colors.black,
                       fontWeight: FontWeight.bold,
                       fontSize: 16),
                 ),),);},);
     
         return SafeArea(
           child: SingleChildScrollView(
             child: PaginatedDataTable(
               header: Container(
                 margin: EdgeInsets.only(top: 15.0),
                 padding: EdgeInsets.only(bottom: 5.0),
                 decoration: BoxDecoration(
                   border: Border(
                     bottom: BorderSide(
                       width: 1.0,
                       color: Colors.black,
                     ),),),
                 child: Text(
                   widget._headerTitle,
                   style: TextStyle(
                     color: Colors.black,
                     fontWeight: FontWeight.bold,
                     fontSize: 20,
                   ),
                 ),
               ),
               columns: dataColumn,
               source: widget._source,
               rowsPerPage: defRowsPerPage,
               availableRowsPerPage: avaiableRowsPerPage,
               onRowsPerPageChanged: (r) {
                 setState(() {
                   defRowsPerPage = r;
                   widget._source = widget._source;
                 });},),),);}}
    import 'package:flutter/material.dart';
    import 'package:universal_html/html.dart';
    import '../models/operator.dart';
    
    class OperatorsDTS extends DataTableSource {

    final oprtrLvlMap = {1: 'Operador', 2: 'Visualizador', 3: 'Administrador'};

    final List<Operator> _operators = [
        Operator('Lamar', 'elit.Nulla.facilisi@amet.com', 2),
        Operator('Colby', 'eu.augue@Nuncquis.com', 3),
        Operator('Kasper', 'mauris@mauris.com', 2),
        Operator('Octavia', 'tellus@utdolor.co.com', 2),
        Operator('Trevor', 'eleifend.nec.malesuada@Uttincidunt.com', 3),
        Operator('Theodore', 'enim@dictumeleifend.co.com', 2),
        Operator('Breanna', 'tortor@ac.com', 3),    
    ];
    int _selectedCount = 0;
    @override
    bool get isRowCountApproximate => false;
    @override
    int get rowCount => _operators.length;
    @override
    int get selectedRowCount => _selectedCount;
    @override
    DataRow getRow(int index) {
        final Operator operator = _operators[index];
        return DataRow.byIndex(
        index: index,
        cells: <DataCell>[
            DataCell(Text(operator.operatorUser)),
            DataCell(Text(operator.operatorName)),
            DataCell(Text(oprtrLvlMap[operator.accessLevel])),
        ],);}}

1 个答案:

答案 0 :(得分:-1)

在漫长的搜索过程中,我终于找到了您的问题的解决方案

你可以简单地使用这个包

https://pub.dev/packages/advanced_datatable

addEmptyRows 属性设置为 false,默认为 true(作为 Flutter Original Widget)。

addEmptyRows: false