如何在数据表的第一行插入数据行？

Question

我有一个数据表，我想在其中添加行。代码有效，但数据行被添加到最后一个数据行下方。我想在顶部添加一行。我使用了 list.insert(0, element) 但它没有用。

到目前为止，这是我的代码：

class _TabelleState extends State<Tabelle> {

  List<DataRow> _rowList = [
    DataRow(
        cells: <DataCell>[
      DataCell(Datum()),
      DataCell(UebungWidget()),
      DataCell(UebungWidget()),
      DataCell(UebungWidget()),
    ]),
  ];
  
  void _addRow() {
    setState(() {
      _rowList.insert(0, (DataRow(
          cells: <DataCell>[
        DataCell(Datum()),
        DataCell(UebungWidget()),
        DataCell(UebungWidget()),
        DataCell(UebungWidget()),
      ])));
    });
  }

Answer 1

一般来说，您使用的方法应该会按预期工作。然而，如果你用 TextFields 填充你的 DataCells，在这种情况下你将不得不添加一个 GlobalKey 到 each TextField，这样 Flutter 就知道每个 DataCell 属于哪里了。

有关 Keys 的更多信息，请观看 this Flutter mini-tutorial。

请尝试以下完整的运行示例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  
  @override
  Widget build(BuildContext context) {
    return Tabelle(); 
  }
}

class Tabelle extends StatefulWidget {
  @override
  _TabelleState createState() => _TabelleState();
}

class _TabelleState extends State<Tabelle> {

  List<DataRow> _rowList = [
    DataRow(
        cells: <DataCell>[
          DataCell(TextField(key: GlobalKey(),)),
          DataCell(TextField(key: GlobalKey(),)),
          DataCell(TextField(key: GlobalKey(),)),
          DataCell(TextField(key: GlobalKey(),)),
        ]),
  ];

  void _addRow() {
    setState(() {
      _rowList.insert(0, (DataRow(
          cells: <DataCell>[
            DataCell(TextField(key: GlobalKey(),)),
            DataCell(TextField(key: GlobalKey(),)),
            DataCell(TextField(key: GlobalKey(),)),
            DataCell(TextField(key: GlobalKey(),)),
          ])));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Plan'), actions: [
        TextButton(
          onPressed: _addRow,
          child: Text(
            'Neues Training',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ]),
      body: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: DataTable(
                dataRowHeight: 200,
                headingRowColor:
                MaterialStateColor.resolveWith((states) => Colors.black26),
                dataRowColor:
                MaterialStateColor.resolveWith((states) => Colors.black26),
                columnSpacing: 20,
                columns: [
                  DataColumn(label: Text('seconds', style: TextStyle(fontSize: 16),)),
                  DataColumn(label: Text('Datum', style: TextStyle(fontSize: 16),)),
                  DataColumn(label: Text('Datum', style: TextStyle(fontSize: 16),)),
                  DataColumn(label: Text('Datum', style: TextStyle(fontSize: 16),)),
                ], rows: _rowList),
          )),
    );
  }
}

如何在数据表的第一行插入数据行？

How to insert a Data Row in the first line in a DataTable?

datatable

list

datarow

flutter