2
votes

Comment supprimer l'icône CheckBox de DataTable dans Flutter?

J'implémente un DataTable pour afficher certaines données, pour ce faire j'utilise un PaginatedDataTable , donc je peux charger et afficher mes données, le problème est que mon DataTable affiche un CheckBox par ligne et que je ne le veux pas.

Voici mon résultat actuel:

Je veux supprimer ces CheckBox mais je ne le suis pas avoir une idée de la façon de procéder.

Code:

ExpensesDataSource _expensesDataSource = ExpensesDataSource([expense]);

    Widget getDataTable() {
      return PaginatedDataTable(
        header: Text('Despesas', style: TextStyle(color: Color(0xFF4C4C4C), fontWeight: FontWeight.bold, fontSize: 15),),
        columns: <DataColumn>[
          DataColumn(
            label: Text("Data"),
            numeric: false,
          ),
          DataColumn(
            label: Text("DescriÃ§Ã£o"),
            numeric: false,
          ),
          DataColumn(
            label: Text("Total"),
            numeric: false,
          ),
        ],
        source: _expensesDataSource,
      );
  }


class ExpensesDataSource extends DataTableSource {

  List<Expense> _expenses = <Expense>[];
  int _selectedCount = 0;

  ExpensesDataSource(List<Expense> listExpenses) {
      this._expenses = listExpenses;
  }

  @override
  DataRow getRow(int index) {
    final Expense expense = _expenses[index];
    return DataRow.byIndex(
        index: index,
        onSelectChanged: (bool value) {
          print('Row selected: $value ${expense.name}');
        },
        cells: [
          DataCell(Text(expense.date)),
          DataCell(Text(expense.name)),
          DataCell(Text(Utils.convert2currency(expense.total_amount)))
        ]
    );
  }

  @override
  // TODO: implement rowCount
  int get rowCount => _expenses.length;

  @override
  bool get isRowCountApproximate => false;

  @override
  int get selectedRowCount => _selectedCount;

}

flutter dart datatable

1 commentaires

Je pense que ce lien devrait dissiper tous vos doutes. Flutter DataTable - Appuyez sur la ligne

4 Réponses :

0
votes

Actuellement uniquement en omettant onSelectionChange: ... ou en passant null au lieu de

    onSelectChanged: (bool value) {
      print('Row selected: $value ${expense.name}');
    },

https: // docs .flutter.io / flutter / material / DataRow / onSelectChanged.html

4 commentaires

Et si je veux lister la sélection?

Ensuite, il n'y a actuellement aucun moyen de se débarrasser de la case à cocher pour autant que je sache.

Puis-je changer la case à cocher pour une autre icône ou la mettre de l'autre côté de la table?

Pour autant que je sache, il n'y a pas d'autre moyen de l'influencer, sauf de s'en débarrasser en ne passant pas un gestionnaire de sélection modifiée. Vous pouvez essayer d'implémenter ou d'étendre DataRow et de personnaliser son comportement, mais je ne sais pas si cela est possible. Je rouvrirai github.com/flutter/flutter/issues/26211

0
votes

Je supprime ces deux éléments parmi sélectionnés: et onSelectChanged: dans DataRow.byIndex () et la case à cocher disparue.

0 commentaires

0
votes

Supprimez les propriétés onSelectChanged et selected de DataRow et ajoutez-les à chaque cellule de données.

DataCell(
    Text(
       employee.lastName.toUpperCase(),
    ),
    onTap: () {
      print("Tapped " + employee.firstName);
      // do whatever you want
    },
),

0 commentaires

1
votes

Disponible maintenant sur la chaîne Stable.

C'est possible si vous êtes sur le canal maître et non sur le canal stable.

Vous devez ajouter une seule propriété à DataTable qui est showCheckboxColumn à être faux.

Votre code complet après la modification sera

@override
Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(
        title: Text(
          "Sample",
          style: TextStyle(color: Colors.white),
        ),
    body: Column(children: <Widget>[
      DataTable(
        showCheckboxColumn: false,
        sortAscending: true,
        columns: <DataColumn>[
          DataColumn(
            label: Text('Product name'),
          ),
          DataColumn(
            label: Text('Product Quantity'),
          ),
        ],
        rows: items
            .map(
              (itemRow) => DataRow(
                onSelectChanged: (bool selected) {
                  if (selected) {
                    //'row-selected: ${itemRow.index}'
                  }
                },
                cells: [
                  DataCell(
                    Text(itemRow.itemName),
                    showEditIcon: false,
                    placeholder: false,
                  ),
                  DataCell(
                    Text(itemRow.itemQuantity),
                    showEditIcon: true,
                    placeholder: false,
                    //onTap: _getSelectedRowInfo,
                  ),
                ],
              ),
            )
            .toList(),
      )
    ]),
    bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: _onItemTapped,
    ));
  }
}

Certains développeurs de flutter ne recommandent pas de changer de maître, mais si aucun problème avec vous, vous pouvez le modifier à l'aide de ces commandes: maître du canal de scintillement mise à jour du flutter

3 commentaires

Disponible en canal stable à partir de Flutter 1.17

Cela supprimera la case à cocher de toutes les lignes. Je voudrais trouver un moyen de se débarrasser de la case à cocher ligne par ligne. Comme dans l'image ci-dessus, la ligne 1 doit avoir la case à cocher car il y a des données mais les lignes 2 et supérieures ne doivent pas avoir de case à cocher.

Je pense que vous devriez faire votre personnalisé.