6
votes

Flutter DataTable supprime le rembourrage supplémentaire

Je veux afficher des données dans un DataTable , j'ai 9 colonnes, toutes sont des nombres sauf la première.

Le problème que j'ai est que je ne vois que les 5 premières colonnes, non pas parce que les données sont trop longues, mais parce qu'il y a beaucoup d'espace entre chaque colonne.

Existe-t-il un moyen de faire en sorte que DataColumn enveloppe les données avec un remplissage que je choisis? Voici mon code:

Scaffold(
  appBar: AppBar(
    title: Text('DataTable Sample'),
  ),
  body: Container(
    child: DataTable(columns: <DataColumn>[
          DataColumn(
            label: Text('Name'),
          ),
          DataColumn(
            label: Text('A'),
          ),
          DataColumn(
            label: Text('B'),
          ),
          DataColumn(
            label: Text('C'),
          ),
          DataColumn(
            label: Text('D'),
          ),
          DataColumn(
            label: Text('E'),
          ),
          DataColumn(
            label: Text('F'),
          ),
          DataColumn(
            label: Text('G'),
          ),
          DataColumn(
            label: Text('H'),
          ),
        ], rows: <DataRow>[
          DataRow(cells: [
            DataCell(Text('1 Boston')),
            DataCell(Text('3')),
            DataCell(Text('3')),
            DataCell(Text('7')),
            DataCell(Text('1')),
            DataCell(Text('30')),
            DataCell(Text('8')),
            DataCell(Text('+2')),
            DataCell(Text('-22')),
          ]),
          DataRow(cells: [
            DataCell(Text('2 London')),
            DataCell(Text('3')),
            DataCell(Text('4')),
            DataCell(Text('12')),
            DataCell(Text('44')),
            DataCell(Text('7')),
            DataCell(Text('44')),
            DataCell(Text('-98')),
            DataCell(Text('0')),
          ]),
          DataRow(cells: [
            DataCell(Text('3 Rome')),
            DataCell(Text('10')),
            DataCell(Text('50')),
            DataCell(Text('90')),
            DataCell(Text('4')),
            DataCell(Text('7')),
            DataCell(Text('33')),
            DataCell(Text('+5')),
            DataCell(Text('-61')),
          ]),
        ]
        )
  ),
);

flutter

0 commentaires

6 Réponses :

0
votes

Vous pouvez utiliser Table au lieu de DataTable. Pour plus d'informations - vidéo .

Voici comment vous pouvez l'utiliser:

Scaffold(
    appBar: AppBar(title: Text('DataTable Sample')),
    body: Container(
      child: Table(
        columnWidths: {0:FractionColumnWidth(.2)},
        children: [
        TableRow(
          children: [
            Text("Name",),
            Text("A",textAlign: TextAlign.center,),
            Text("B",textAlign: TextAlign.center,),
            Text("A",textAlign: TextAlign.center,),
            Text("B",textAlign: TextAlign.center,),
            Text("A",textAlign: TextAlign.center,),
            Text("B",textAlign: TextAlign.center,),
            Text("A",textAlign: TextAlign.center,),
            Text("B",textAlign: TextAlign.center,),
          ]
         ),
         TableRow(
          children: [
            Text("1 Boston",),
            Text('3',textAlign: TextAlign.center,),
            Text('3',textAlign: TextAlign.center,),
            Text('7',textAlign: TextAlign.center,),
            Text('1',textAlign: TextAlign.center,),
            Text('30',textAlign: TextAlign.center,),
            Text('8',textAlign: TextAlign.center,),
            Text('+2',textAlign: TextAlign.center,),
            Text('-22',textAlign: TextAlign.center,),
          ]
         ),
         TableRow(
          children: [
            Text('2 London',),
            Text('3',textAlign: TextAlign.center,),
            Text('4',textAlign: TextAlign.center,),
            Text('12',textAlign: TextAlign.center,),
            Text('44',textAlign: TextAlign.center,),
            Text('7',textAlign: TextAlign.center,),
            Text('44',textAlign: TextAlign.center,),
            Text('-98',textAlign: TextAlign.center,),
            Text('0',textAlign: TextAlign.center,),
          ]
         ),
        TableRow(
          children: [
              Text('3 Rome'),
              Text('10',textAlign: TextAlign.center,),
              Text('50',textAlign: TextAlign.center,),
              Text('90',textAlign: TextAlign.center,),
              Text('4',textAlign: TextAlign.center,),
              Text('7',textAlign: TextAlign.center,),
              Text('33',textAlign: TextAlign.center,),
              Text('+5',textAlign: TextAlign.center,),
              Text('-61',textAlign: TextAlign.center,),
          ]
         ),
        ]
      ),
    )
  ),

1 commentaires

J'ai la même chose, je ne peux pas voir le tableau entier et je veux utiliser DataTable cause de certaines fonctionnalités comme le Sorting données.

1
votes

Actuellement, même je suis coincé avec le même problème, mais j'ai trouvé une alternative à ce problème où vous pouvez voir toutes vos 9 colonnes . Jetez un œil si cela peut vous aider.

utiliser SingleChildScrollView pour faire défiler la table de données horizontalement

SingleChildScrollView data() { 
return SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Container(
child: DataTable(columns: <DataColumn>[
      DataColumn(
        label: Text('Name'),
      ),
      DataColumn(
        label: Text('A'),
      ),
      DataColumn(
        label: Text('B'),
      ),
      DataColumn(
        label: Text('C'),
      ),
      DataColumn(
        label: Text('D'),
      ),
      DataColumn(
        label: Text('E'),
      ),
      DataColumn(
        label: Text('F'),
      ),
      DataColumn(
        label: Text('G'),
      ),
      DataColumn(
        label: Text('H'),
      ),
    ], rows: <DataRow>[
      DataRow(cells: [
        DataCell(Text('1 Boston')),
        DataCell(Text('3')),
        DataCell(Text('3')),
        DataCell(Text('7')),
        DataCell(Text('1')),
        DataCell(Text('30')),
        DataCell(Text('8')),
        DataCell(Text('+2')),
        DataCell(Text('-22')),
      ]),
      DataRow(cells: [
        DataCell(Text('2 London')),
        DataCell(Text('3')),
        DataCell(Text('4')),
        DataCell(Text('12')),
        DataCell(Text('44')),
        DataCell(Text('7')),
        DataCell(Text('44')),
        DataCell(Text('-98')),
        DataCell(Text('0')),
      ]),
      DataRow(cells: [
        DataCell(Text('3 Rome')),
        DataCell(Text('10')),
        DataCell(Text('50')),
        DataCell(Text('90')),
        DataCell(Text('4')),
        DataCell(Text('7')),
        DataCell(Text('33')),
        DataCell(Text('+5')),
        DataCell(Text('-61')),
      ]),
    ]
    )
  ),
  }

créer une fonction en dehors de "Widget build (BuildContext context) {}" comme indiqué ci-dessous

Scaffold(
appBar: AppBar(title: Text('DataTable Sample')),
body: data()
)

Faites-moi savoir si cela résout votre problème

0 commentaires

8
votes

Oui. Dernièrement, l'équipe Flutter a fusionné une mise à jour de ce widget. Il est maintenant uniquement dans le canal "maître" (vous êtes probablement sur "stable"), pour basculer le flutter channel master flutter upgrade puis la flutter upgrade à flutter upgrade dans le terminal. Après cela, vous pouvez contrôler l'espace entre chaque colonne en définissant le paramètre columnSpacing de DataTable . Pour plus d'informations, consultez ce numéro fermé

1 commentaires

Je pensais que cela ne fonctionnait pas au début car je développais sur Flutter For Web et s'il y a plus d'espace à utiliser, cela répartira vos colonnes de manière appropriée.

6
votes

vous pouvez utiliser SingleChildScrollView et FittedBox comme parent.

Scaffold(
  appBar: AppBar(
    title: Text('DataTable Sample'),
  ),
  body: SingleChildScrollView(
    scrollDirection: Axis.vertical,
    child: FittedBox(
      child: DataTable(
        columns: <DataColumn>[
          DataColumn(
            label: Text('Name'),
          ),
          DataColumn(
            label: Text('A'),
          ),
          DataColumn(
            label: Text('B'),
          ),
          DataColumn(
            label: Text('C'),
          ),
          DataColumn(
            label: Text('D'),
          ),
          DataColumn(
            label: Text('E'),
          ),
          DataColumn(
            label: Text('F'),
          ),
          DataColumn(
            label: Text('G'),
          ),
          DataColumn(
            label: Text('H'),
          ),
        ],
        rows: <DataRow>[
          DataRow(cells: [
            DataCell(Text('1 Boston')),
            DataCell(Text('3')),
            DataCell(Text('3')),
            DataCell(Text('7')),
            DataCell(Text('1')),
            DataCell(Text('30')),
            DataCell(Text('8')),
            DataCell(Text('+2')),
            DataCell(Text('-22')),
          ]),
          DataRow(cells: [
            DataCell(Text('2 London')),
            DataCell(Text('3')),
            DataCell(Text('4')),
            DataCell(Text('12')),
            DataCell(Text('44')),
            DataCell(Text('7')),
            DataCell(Text('44')),
            DataCell(Text('-98')),
            DataCell(Text('0')),
          ]),
          DataRow(cells: [
            DataCell(Text('3 Rome')),
            DataCell(Text('10')),
            DataCell(Text('50')),
            DataCell(Text('90')),
            DataCell(Text('4')),
            DataCell(Text('7')),
            DataCell(Text('33')),
            DataCell(Text('+5')),
            DataCell(Text('-61')),
          ]),
        ],
      ),
    ),
  ),
);

0 commentaires

0
votes

Pour supprimer l'espace entre chaque colonne, vous pouvez modifier la valeur de columnSpacing qui est 56 par défaut.

1 commentaires

Veuillez fournir un extrait de code expliquant comment procéder.

0
votes

Essayez de passer le paramètre columnSpacing dans votre fonction 'DataTable ()', il semble l'accepter, la valeur par défaut est 56, le réduire crampera les colonnes et l'augmenter étendra les données

0 commentaires