0
votes

Ajout d'un espace entre les TableRows dans Flutter

Je crée une table dans Flutter qui contient des TableRows, je veux juste ajouter de l'espace entre ces lignes.

Table(
    columnWidths: {0: FractionColumnWidth(.4)},
    children:[
        TableRow(children: [
        Text(
          'Original Title',
        ),
        Text(
          original_title,
        ),
      ]),
      TableRow(children: [
        Text(
          'Original Language',
        ),
        Text(
          original_language,
        ),
      ])
    ],
);

flutter dart

0 commentaires

3 Réponses :

3
votes

Ce n'est probablement pas le moyen le plus efficace, mais vous pouvez envelopper le TableRow dans une classe de remplissage

Table(
  columnWidths: {0: FractionColumnWidth(.4)},
  children:[
    TableRow(children: [
      Padding(
      padding: EdgeInsets.symmetric(vertical: 8.0)
      child: Text(
        'Original Title',
      )),
      Padding(
      padding: EdgeInsets.symmetric(vertical: 8.0)
      child: Text(
        original_title,
      )),
    ]),
    TableRow(children: [
      Padding(
      padding: EdgeInsets.symmetric(vertical: 8.0)
      child: Text(
        'Original Language',
      )),
      Padding(
      padding: EdgeInsets.symmetric(vertical: 8.0)
      child: Text(
        original_language,
      )),
    ]),
  ],
);

Quelque chose du genre:

Padding(
  padding: EdgeInsets.all(8.0),
  child: const Card(child: Text('Hello World!')),
)

Classe de rembourrage:

https://api.flutter.dev/flutter/widgets/Padding-class.html

Classe EdgeInsets:

https://api.flutter.dev/flutter/painting/EdgeInsets-class.html

2 commentaires

désolé ne fonctionne pas cela donne ceci "Le type d'élément 'Padding' ne peut pas être assigné au type de liste 'TableRow'."

@YoussefHad pourriez-vous essayer d'ajouter du rembourrage autour du texte, voir ma modification. Je ne suis pas sur mon ordinateur personnel, je ne peux donc pas vérifier si cela fonctionne.

0
votes

Voici comment je l'ai fait.

Créez une constante, disons rowSpacer comme

              Table(
                  children: [
                       TableRow(
                          children: [
                            Text('Name:'),
                            Text('Aman kumar')
                            ]),
                       rowSpacer,                        //Using the Constant
                       TableRow(
                           children: [
                             Text('Date of Birth:'),
                             Text('September 27, 1998')
                            ]),
                   )

N'oubliez pas que le nombre de widgets SizedBox à ajouter ci-dessus doit être le même que le nombre de colonnes dans votre tableau. Pour ce cas, j'ai 2 colonnes, donc 2 SizedBoxes.

Utilisez maintenant cette constante pour donner l'espacement entre les lignes.

const rowSpacer=TableRow(
                  children: [
                      SizedBox(
                      height: 8,
                      ),
                      SizedBox(
                      height: 8,
                      )
                ]);

0 commentaires

0
votes

La chose la plus simple que vous pouvez faire est d'encapsuler le contenu de chaque cellule du tableau avec un remplissage comme ceci:

    TableRow   (children: [
              TableCell(
                child:Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(EMAIL,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,


                  ),),
                ),
              ),
              TableCell(
                  child:Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(authUser.email),
                  )
              ),
            ])

0 commentaires