web-dev-qa-db-fra.com

Structure de la table Flutter

Je veux obtenir cette structure:

-----------------------------------------------------------------------------------
item 1                                 item 2
item 3                                 item 4
-----------------------------------------------------------------------------------

Fondamentalement, je devrais avoir un Table avec 2 columns avec 2 rows dans chaque column, mais voici l'effet que j'obtiens:

Voici mon code:

new Container(
          decoration: new BoxDecoration(color: Colors.grey),
          child: new Row(
            children: <Widget>[

              new Column(
                children: <Widget>[
                  new Container(
                    decoration: new BoxDecoration(color: Colors.red),
                    child: new Text("item 1"),
                  ),
                  new Container(
                    decoration: new BoxDecoration(color: Colors.amber),
                    child: new Text("item 3"),
                  ),
                ],
              ),

              new Column(
                children: <Widget>[
                  new Container(
                    decoration: new BoxDecoration(color: Colors.green),
                    child: new Text("item 2"),
                  ),
                  new Container(
                    decoration: new BoxDecoration(color: Colors.teal),
                    child: new Text("item 4"),
                  )
                ],
              )

            ],
          ),
        )

Je souhaite que chaque column occupe la moitié de l'espace width disponible. Sur Android j'utiliserais la propriété weight et c'est tout.

flutterflutter-layouttabular
4
Ale

en utilisant flex (par défaut, c'est 1), vous pouvez séparer les deux colonnes, puis utiliser le crossAxisAlignment pour les aligner au début: enter image description here

  new Container(
    decoration: new BoxDecoration(color: Colors.grey),
    child: new Row(
      children: <Widget>[
        Expanded(
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Container(
                decoration: new BoxDecoration(color: Colors.red),
                child: new Text("item 1"),
              ),
              new Container(
                decoration: new BoxDecoration(color: Colors.amber),
                child: new Text("item 3"),
              ),
            ],
          ),
        ),
        Expanded(
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Container(
                decoration: new BoxDecoration(color: Colors.green),
                child: new Text("item 2"),
              ),
              new Container(
                decoration: new BoxDecoration(color: Colors.teal),
                child: new Text("item 4"),
              )
            ],
          ),
        )
      ],
    ),
  )
7
Raouf Rahiche

Je suggérerais d'utiliser le widget de table pour la cohérence et la facilité car les lignes et les colonnes imbriquées peuvent devenir un peu désordonnées et bien en retrait.

https://docs.flutter.io/flutter/widgets/Table-class.html

   ...
Table(children: [
  TableRow(children: [
    Text("item 1"),
    Text("item 2"),
  ]),
  TableRow(children:[
    Text("item 3"),
    Text("item 4"),
  ]),
]);
19
N. T.