我想在单击addNew时将行插入到数据表的顶部，但它只是将其添加到底部。即使使用setstate，也不起作用

Question

此表被用作表单中的组件，在此，我在数据表中获取列和行，如果“newRowPostion”：'top'为 true，我希望将行添加到顶部。所以，我的问题是，当我单击 addNew 时，它不会在顶部添加新行，而是仅添加到底部，但是当我单击取消表单并再次打开表单时，我可以看到顶部新添加的行，所以我尝试使用 setState，因为我认为它可能没有更新小部件，即使这样它也不起作用，我也使用 uniqueKey()，但它仍然不起作用... ..

void buildColumns() {
    cols = tableColumn.map<DataColumn>((colData) {
      String colWidthString =
          colData['width'] ?? '200'; // 200 default column width
      if (colWidthString.contains('px')) {
        colWidthString = colWidthString.replaceAll('px', '');
      }
      columnMinWidth = double.parse(colWidthString);
      return DataColumn(
        label: SizedBox(
            width: columnMinWidth,
            child: Center(
                child: Text(
              colData['name'],
              style: const TextStyle(color: Colors.black),
            ))),
        numeric: colData['type'] == 'number', // Set numeric based on type
      );
    }).toList();
  }

  DataRow buildSingleRow(int tableRow) {
    var record = tableRecords[tableRow];
    List<DataCell> cells = tableColumn.map<DataCell>((column) {
      String columnName = column['name'];
      String dataType = column['type'];
      dynamic cellValue = record[columnName] ?? '';
      Map<String, dynamic> columnAccess = column['access'];

      if (tableRow == (tableRecords.length - 1) && displayAggragtes) {
        return DataCell(
          buildDataCell(tableRow, dataType, cellValue, columnName, columnAccess,
              column, false),
        );
      } else {
        return DataCell(
          buildDataCell(tableRow, dataType, cellValue, columnName, columnAccess,
              column, true),
        );
      }
    }).toList();
    return DataRow(cells: cells, key: UniqueKey());
  }

  void buildRows() {
    for (int tableRow = 0; tableRow < tableRecords.length; tableRow++) {
      rows.add(buildSingleRow(tableRow));
    }
  }

  Widget buildDataCell(int indexOfRow, String dataType, dynamic cellValue, key,
      columnAccess, Map<String, dynamic> column, bool inputField) {
    if (dataType == 'select' && inputField) {
      //cellValue
      //indexRow
      //column
      //readOnly
      //onValue
      return SelectDropdownFormField(
        column: column,
        value: cellValue,
        onValueChangeInTable: onValueChangeInTable,
        indexOfRow: indexOfRow,
        readOnly: widget.readOnly,
        key: UniqueKey(),
      );
    } else if (dataType == 'date' && inputField) {
      return DatePickerComponent(
        column: column,
        indexOfRow: indexOfRow,
        value: cellValue,
        onValueChangeInTable: onValueChangeInTable,
        readOnly: widget.readOnly,
        key: UniqueKey(),
      );
    } else if (dataType == 'string' && inputField) {
      return TableTextInputFieldComponent(
        column: column,
        indexOfRow: indexOfRow,
        value: cellValue,
        onValueChangeInTable: onValueChangeInTable,
        readOnly: widget.readOnly,
        key: UniqueKey(),
      );
    } else if (dataType == 'number' && inputField) {
      return TableNumberInputField(
        onValueChangeInTable: onValueChangeInTable,
        indexOfRow: indexOfRow,
        value: cellValue,
        readOnly: widget.readOnly,
        column: column,
        key: UniqueKey(),
      );
    } else if (dataType == 'currency' && inputField) {
      return TableCurrencyComponent(
        column: column,
        onValueChangeInTable: onValueChangeInTable,
        indexOfRow: indexOfRow,
        value: cellValue,
        readOnly: widget.readOnly,
        key: UniqueKey(),
      );
    } else if (!inputField) {
      return Center(child: Text(cellValue.toString()));
    } else {
      return Center(key: UniqueKey(), child: const Text('Not suppported'));
    }
  }

  void addEmptyRow() {
    List<DataCell> cells = [];
    int indexOfRow = rows.length; // Get the index of the new row
    Map<String, dynamic> emptyData = {};
    List<dynamic> columns = tableFieldDetails
        .otherFieldProperties['table_configuration']['columns'];
    String columnName = '';
    Map<String, dynamic> columnAccess = {};
    for (int i = 0; i < columns.length; i++) {
      var column = columns[i];
      columnName = column['name'];
      String dataType = column['type'];
      columnAccess = column['access'];

      // Check if columnName exists in emptyData
      if (!emptyData.containsKey(columnName)) {
        emptyData[columnName] = ''; // Add columnName with empty value
      }
      if (displayAggragtes) {
        cells.add(DataCell(
          buildDataCell(indexOfRow - 1, dataType, '', columnName, columnAccess,
              column, true),
        ));
      }
    }

    // Add emptyData to tableRecords
    if (displayAggragtes) {
      tableRecords.insert(tableRecords.length - 1, emptyData);
      rows.insert(rows.length - 1, DataRow(cells: cells));
    } else if (newRowPosition == '' || newRowPosition == 'bottom') {
      tableRecords.add(emptyData);
      rows.add(buildSingleRow((tableRecords.length - 1)));
    } else if (newRowPosition == 'top') {
      print('objectobjectobjectobjectobject poonammmmmmmmmmmmmmmmmm');
      tableRecords.insert(0, emptyData);
      rows.add(buildSingleRow(tableRecords.length - 1));
    }
    //onValueChangeInTable(indexOfRow,'',columnName,columnAccess);
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            DataTable(
              columns: cols,
              rows: rows,
              border: TableBorder.all(color: Colors.grey),
              columnSpacing: 8,
              dataRowHeight: 60,
              headingRowColor: MaterialStateProperty.resolveWith(
                  (states) => const Color(0xFFECF0FE)),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: ElevatedButton(
                onPressed: () {
                  setState(() {
                    addEmptyRow(); // Function to add an empty row
                  });
                },
                child: const Text(
                  'Add Row',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

如果您想首先插入行，那么您必须像这样更改 buildRow 函数。

void buildRows() {
    for (int tableRow = 0; tableRow < tableRecords.length; tableRow++) {
        rows.insert(0, buildSingleRow(tableRow));
    }
  }

通过使用此方法，您的行将被插入到行列表中的第一个索引。