web-dev-qa-db-fra.com

Définir la largeur de la colonne en flottement

Je dois définir une largeur de colonne dans le flutter, je dois faire une mise en page avec 3 sections, l'une devrait être 20% de l'écran, l'autre 60% et le dernier 20%. Je sais que ces 3 colonnes devraient être dans une rangée, mais je ne sais pas comment régler la taille, lorsque je le fais, les 3 colonnes prennent la même taille.

Je vais apprécier vos commentaires.

user-interfacedartflutter
13
Joseph Arriaza

Au lieu de coder en dur la taille, je suggérerais d'utiliser Flex comme

Row(
      children: <Widget>[
        Expanded(
          flex: 2, // 20%
          child: Container(color: Colors.red),
        ),
        Expanded(
          flex: 6, // 60%
          child: Container(color: Colors.green),
        ),
        Expanded(
          flex: 2, // 20%
          child: Container(color: Colors.blue),
        )
      ],
    )

Qui produira comme ci-dessous, enter image description here

47
Dinesh Balasubramanian

Pour les futurs visiteurs, limiter le width d'un Column pourrait être

  1. Limitant le width de Column lui-même, utilisez SizedBox

    SizedBox(
  width: 100, // set this
  child: Column(...),
)

2 (A). Limiter width sur children à l'intérieur de Column, sans valeurs codées en dur

Column(
  children: <Widget>[
    Expanded(
      flex: 3, // takes 30% of available width 
      child: Child1(),
    ),
    Expanded(
      flex: 7, // takes 70% of available width  
      child: Child2(),
    ),
  ],
)

2 (B). Limitation de width de children à l'intérieur de Column, avec des valeurs de codage en dur.

Column(
  children: <Widget>[
    SizedBox(
      width: 100, // hard coding child width
      child: Child1(),
    ),
    SizedBox(
      width: 200, // hard coding child width
      child: Child2(),
    ),
  ],
)
1
CopsOnRoad