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.
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.
isButtonDisabled
)onPressed
sur null
ou une fonction onPressed: () {}
isButtonDisabled
dans le cadre de cette condition et renvoyez soit null
, soit une fonction.setState(() => isButtonDisabled = true)
pour retourner la variable conditionnelle.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();
};
}
}
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')
);
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 ().
La réponse simple est onPressed : null
donne un bouton désactivé.
Vous pouvez activer ou désactiver des boutons comme celui-ci
RaisedButton(onPressed: () => isEnabled ? _handleClick : null)
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