web-dev-qa-db-fra.com

Comment désactiver un bouton dans Flutter?

Je commence tout juste à comprendre Flutter, mais je n'arrive pas à comprendre comment définir l'état activé d'un bouton.

Dans la documentation, il est indiqué de définir onPressed sur null pour désactiver un bouton et de lui attribuer une valeur lui permettant de l'activer. Cela convient si le bouton reste dans le même état pour le cycle de vie.

J'ai l'impression qu'il me faut créer un widget Stateful personnalisé qui me permettra de mettre à jour l'état activé du bouton (ou le rappel onPressed) d'une manière ou d'une autre.

Donc ma question est comment ferais-je cela? Cela semble être une exigence assez simple, mais je ne trouve rien dans la documentation sur la façon de le faire.

Merci.

buttondartflutter
22
chris84948

Je pense que vous voudrez peut-être introduire des fonctions d’aide à build votre bouton, ainsi qu’un widget Stateful et une propriété permettant de la désactiver.

  • Utilisez un StatefulWidget/State et créez une variable pour contenir votre condition (par exemple isButtonDisabled)
  • Définissez ceci sur true au départ (si c'est ce que vous désirez)
  • Lors du rendu du bouton, ne définissez pas directement la valeur onPressedsur null ou une fonction onPressed: () {}
  • À la place , définissez-le conditionnellement à l'aide d'une fonction ternaire ou auxiliaire (exemple ci-dessous)
  • Vérifiez la isButtonDisabled dans le cadre de cette condition et renvoyez soit null, soit une fonction.
  • Lorsque vous appuyez sur le bouton (ou lorsque vous souhaitez le désactiver), utilisez setState(() => isButtonDisabled = true) pour retourner la variable conditionnelle.
  • Flutter appellera à nouveau la méthode build() avec le nouvel état et le bouton sera restitué avec un gestionnaire de presse null et sera désactivé.

Voici un peu plus de contexte en utilisant le projet de compteur Flutter.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  bool _isButtonDisabled;

  @override
  void initState() {
    _isButtonDisabled = false;
  }

  void _incrementCounter() {
    setState(() {
      _isButtonDisabled = true;
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("The App"),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            _buildCounterButton(),
          ],
        ),
      ),
    );
  }

  Widget _buildCounterButton() {
    return new RaisedButton(
      child: new Text(
        _isButtonDisabled ? "Hold on..." : "Increment"
      ),
      onPressed: _isButtonDisabled ? null : _incrementCounter,
    );
  }
}

Dans cet exemple, j'utilise un ternaire en ligne pour définir de manière conditionnelle les variables Text et onPressed, mais il peut être plus approprié de l'extraire dans une fonction (vous pouvez également utiliser cette même méthode pour modifier le texte du bouton):

Widget _buildCounterButton() {
    return new RaisedButton(
      child: new Text(
        _isButtonDisabled ? "Hold on..." : "Increment"
      ),
      onPressed: _counterButtonPress(),
    );
  }

  Function _counterButtonPress() {
    if (_isButtonDisabled) {
      return null;
    } else {
      return () {
        // do anything else you may want to here
        _incrementCounter();
      };
    }
  }
31
Ashton Thomas

Selon les docs:

"Si le rappel onPressed est nul, le bouton sera désactivé et ressemblera par défaut à un bouton plat de la couleur disabledColor."

https://docs.flutter.io/flutter/material/RaisedButton-class.html

Donc, vous pourriez faire quelque chose comme ça:

    RaisedButton(
      onPressed: calculateWhetherDisabledReturnsBool() ? null : () => whatToDoOnPressed,
      child: Text('Button text')
    );
12
Steve Alexander

Pour un nombre spécifique et limité de widgets, les encapsuler dans un widget IgnorePointer fait exactement cela: lorsque sa propriété ignoring est définie sur true, le sous-widget (en fait, le sous-arbre entier) n'est pas cliquable. 

IgnorePointer(
    ignoring: true, // or false
    child: RaisedButton(
        onPressed: _logInWithFacebook,
        child: Text("Facebook sign-in"),
        ),
),

Sinon, si vous souhaitez désactiver un sous-arbre entier, consultez AbsorbPointer (). 

5
edmond

La réponse simple est onPressed : null donne un bouton désactivé.

4
Mercy peka

Vous pouvez activer ou désactiver des boutons comme celui-ci

RaisedButton(onPressed: () => isEnabled ? _handleClick : null)
1
CopsOnRoad

Vous pouvez également utiliser AbsorbPointer, de la manière suivante:

AbsorbPointer(
      absorbing: true, // by default is true
      child: RaisedButton(
        onPressed: (){
          print('pending to implement onPressed function');
        },
        child: Text("Button Click!!!"),
      ),
    ),

Si vous voulez en savoir plus sur ce widget, vous pouvez vérifier le lien suivant Flutter Docs

1
Juan E. Londoño T.