6
votes

Comment ajouter dynamiquement des éléments à la table en flutter?

Quelqu'un sait-il comment ajouter dynamiquement plus de lignes dans le DataTable dans Flutter. Comme vous pouvez le voir, mon code est très "codé en dur" [ligne: 11-31].
Il devrait y avoir un moyen de se débarrasser de l'écriture de plus en plus de DataRows.

Code:

class DataTableWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: [
        DataColumn(label: Text('Patch')),
        DataColumn(label: Text('Version')),
        DataColumn(label: Text('Ready')),
      ],
      rows: <DataRow>[
        DataRow(
          cells: <DataCell>[
            DataCell(Text('AAAAAA')),
            DataCell(Text('1')),
            DataCell(Text('Yes')),
          ],
        ),
        DataRow(
          cells: <DataCell>[
            DataCell(Text('BBBBBB')),
            DataCell(Text('2')),
            DataCell(Text('No')),
          ],
        ),
        DataRow(
          cells: <DataCell>[
            DataCell(Text('CCCCCC')),
            DataCell(Text('3')),
            DataCell(Text('Yes')),
          ],
        ),
      ],
    );
  }
}

flutter dart

0 commentaires

3 Réponses :

10
votes

Vous pouvez faire quelque chose comme ceci: **

class DataTableWidget extends StatelessWidget {

      List results=[] ;
       intState((){
         super.iniState();
            this.getSale();
 })
Future<String> getData () async {

var response = await http.get(
  "$saleUrl/?format=json",

);
setState(() {
  var dataConvertedToJson = 
json.decode(utf8.decode(response.bodyBytes));
  results = dataConvertedToJson['results'];
});
 print('${results.length}');
  return "successful";
 }
  DataRow _getDataRow(result) {
    return DataRow(
      cells: <DataCell>[
        DataCell(Text(data["text1"])),
        DataCell(Text(data["text2"])),
        DataCell(Text(data["text3"])),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: [
        DataColumn(label: Text('Patch')),
        DataColumn(label: Text('Version')),
        DataColumn(label: Text('Ready')),
      ],
      rows: List.generate(
          results.length, (index) => _getDataRow(results[index])),
    );
  }
}

3 commentaires

pourquoi la liste est-elle vide? Le code n'affiche pas text1, text2 et text3

@ SarahPöhler J'ai laissé la liste vide, car je ne sais pas si vous récupérez les données d'un serveur ou d'une base de données locale ou autre. Remplir la liste n'est pas le but de cette question. Mais comme vous ne semblez pas satisfait, j'ai édité ma réponse

impressionnant. Merci beaucoup.

20
votes

Vous pouvez utiliser

class DataTableWidget extends StatelessWidget {
  final List<Map<String, String>> listOfColumns = [
    {"Name": "AAAAAA", "Number": "1", "State": "Yes"},
    {"Name": "BBBBBB", "Number": "2", "State": "no"},
    {"Name": "CCCCCC", "Number": "3", "State": "Yes"}
  ];
//  DataTableWidget(this.listOfColumns);     // Getting the data from outside, on initialization
  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: [
        DataColumn(label: Text('Patch')),
        DataColumn(label: Text('Version')),
        DataColumn(label: Text('Ready')),
      ],
      rows:
          listOfColumns // Loops through dataColumnText, each iteration assigning the value to element
              .map(
                ((element) => DataRow(
                      cells: <DataCell>[
                        DataCell(Text(element["Name"])), //Extracting from Map element the value
                        DataCell(Text(element["Number"])),
                        DataCell(Text(element["State"])),
                      ],
                    )),
              )
              .toList(),
    );
  }
}

Voici votre code en utilisant cette méthode.

listOfColumns.map(((element) => DataRow(...))).toList()

1 commentaires

ce n'est pas ce que je veux. Je veux juste entrer la taille de la table (ligne et colonne) et obtenir une table d'odeurs datable. il devrait y avoir un moyen commun pour cela.

1
votes

La structure de données sous-jacente, probablement une liste, est ce que vous voulez vous soucier de changer. Les éléments de l'interface utilisateur comme le tableau observent simplement. La fonction setState () demande à l'interface utilisateur de prendre un nouveau look après avoir mis à jour votre liste.

Voici un exemple de travail piraté à partir d'un exemple de flutter doc. Cliquez sur le bouton pour ajouter des lignes.

flutter run -d chrome

Cela se construit pour moi avec

flutter build web

puis exécutez avec

XXX

0 commentaires