1
votes

Problème de débordement sur certains appareils iOS et Android

J'ai implémenté des boutons radio dans une rangée et testé l'interface utilisateur de certains appareils. Dans les petits appareils comme l'iPhone 5s, j'ai eu l'erreur de dépassement de capacité.

Widget priority() {
    return Column(
      children: <Widget>[
        Container(
          alignment: Alignment.centerLeft,
          child: const Text('Priority:'),
        ),
        Row(
          children: <Widget>[
            radioButton('High', 0),
            radioButton('Medium', 1),
            radioButton('Low', 2),
          ],
        )
      ],
    );
  }

  Widget radioButton(String text, int value) {
    return Row(
      children: <Widget>[
        Radio<int>(
            activeColor: pinkColor,
            value: value,
            groupValue: _selected,
            onChanged: (int value) {
              onChange(value);
            }),
        Text(text, style: TextStyle(fontSize: 15)),
      ],
    );
  }

flutter flutter-layout

2 commentaires

Évitez d'utiliser des fonctions pour stocker des widgets

Utilisez plutôt des classes;)

4 Réponses :

0
votes

Widget priority() {
    return Column(
      children: <Widget>[
        Container(
          alignment: Alignment.centerLeft,
          child: const Text('Priority:'),
        ),
        Wrap(
          direction: Axis.horizontal,
          children: <Widget>[
            radioButton('High', 0),
            radioButton('Medium', 1),
            radioButton('Low', 2),
          ],
        )
      ],
    );
  }

  Widget radioButton(String text, int value) {
    return Row(
      children: <Widget>[
        Radio<int>(
            activeColor: pinkColor,
            value: value,
            groupValue: _selected,
            onChanged: (int value) {
              onChange(value);
            }),
        Text(text, style: TextStyle(fontSize: 15)),
      ],
    );
  }
Replaced Row with Wrap. If Overflow occurs, the overflowing widget will be aligned in the next line. Hope it helps.

2 commentaires

J'ai essayé votre solution mais j'ai toujours l'erreur de débordement.

veuillez mettre à jour la question avec le code d'appel de la méthode priority ()

1
votes

Hé, utilisez le widget étendu pour résoudre le problème de débordement et pour IOS, le widget Android encapsule tout le widget dans SafeArea, j'espère que cela peut vous aider ...

0 commentaires

1
votes

Ajoutez SingleChildScrollView, cela fonctionnera.

Widget priority() {
return Column(
  children: <Widget>[
    Container(
      alignment: Alignment.centerLeft,
      child: const Text('Priority:'),
    ),
    SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: <Widget>[
            radioButton('High', 0),
            radioButton('Medium', 1),
            radioButton('Low', 2),
          ],
        ))
  ],
);

}

0 commentaires

0
votes

Code de la solution:

Widget priority() {
    return Column(
      children: <Widget>[
        Container(
          alignment: Alignment.centerLeft,
          child: const Text('Priority:'),
        ),
        Row(
          children: <Widget>[
            Expanded(child: radioButton('High', 0),),
            Expanded(child: radioButton('Medium', 1),),
            Expanded(child: radioButton('Low', 2),),,
          ],
        )
      ],
    );
  }

  Widget radioButton(String text, int value) {
    return Row(
      children: <Widget>[
        Radio<int>(
            activeColor: pinkColor,
            value: value,
            groupValue: _selected,
            onChanged: (int value) {
              onChange(value);
            }),
        Text(text, style: TextStyle(fontSize: 15)),
      ],
    );
  }

La raison pour laquelle vous l'avez rencontré sur certains appareils et pas sur les autres est que tous les appareils ont des tailles d'écran différentes.

Widget étendu garantit que son widget enfant couvre tout l'espace disponible alors qu'il se trouve parmi d'autres widgets dans une liste de widgets ( [] )

Lorsque nous l'utilisons sur plusieurs widgets, il divise également le espace entre eux. Vous pouvez contrôler la taille prise par chaque widget en utilisant la propriété flex .

Si vous introduisez des widgets non Expanded entre Expanded code> les widgets, puis les widgets non-Expanded une fois sont d'abord disposés avant le (s) widget (s) Expanded .

(Au moins c'est ce qui est mentionné dans la vidéo Flutter's Widget of the Week. Cependant, Je pense qu'il a quelque chose de plus complexe que nous n'avons pas besoin de savoir.)

Astuce: évitez d'utiliser des fonctions dans ces endroits ... Utilisez plutôt des classes.

Un beau tutoriel de l'équipe officielle Flutter:

https://flutter.dev/docs/development/ui/interactive

0 commentaires