webentwicklung-frage-antwort-db.com.de

Wie deaktiviere ich einen Button in Flutter?

Ich habe gerade erst angefangen, Flutter zu verstehen, aber ich habe Schwierigkeiten, herauszufinden, wie man den aktivierten Zustand einer Schaltfläche einstellt.

In den Dokumenten heißt es, onPressed auf null zu setzen, um eine Schaltfläche zu deaktivieren und ihr einen Wert zu geben, um sie zu aktivieren. Dies ist in Ordnung, wenn sich die Schaltfläche für den Lebenszyklus weiterhin im gleichen Status befindet.

Ich habe den Eindruck, dass ich ein benutzerdefiniertes Stateful-Widget erstellen muss, mit dem ich den aktivierten Status der Schaltfläche (oder den onPressed-Rückruf) irgendwie aktualisieren kann.

Meine Frage ist also, wie würde ich das machen? Dies scheint eine ziemlich einfache Anforderung zu sein, aber ich kann in den Dokumenten nichts dazu finden.

Vielen Dank.

22
chris84948

Ich denke, dass Sie einige Hilfsfunktionen für build Ihrer Schaltfläche sowie ein Stateful-Widget zusammen mit einer Eigenschaft zum Abschalten einführen möchten.

  • Verwenden Sie StatefulWidget/State und erstellen Sie eine Variable, die Ihre Bedingung enthalten soll (z. B. isButtonDisabled).
  • Setzen Sie diese Einstellung zunächst auf "true" (wenn Sie dies wünschen)
  • Beim Rendern der Schaltfläche setze onPressed nicht direkt Wert entweder auf null oder auf eine Funktion onPressed: () {}.
  • Statt, setze es unter Verwendung einer Ternär- oder Hilfsfunktion bedingt (siehe Beispiel unten)
  • Überprüfen Sie das isButtonDisabled als Teil dieser Bedingung und geben Sie entweder null oder eine Funktion zurück.
  • Wenn die Taste gedrückt wird (oder wann immer Sie die Taste deaktivieren möchten), verwenden Sie setState(() => isButtonDisabled = true), um die bedingte Variable umzukehren.
  • Flatter ruft die build()-Methode erneut mit dem neuen Status auf und die Schaltfläche wird mit einem null-Pressehandler gerendert und deaktiviert.

Hier ist ein weiterer Kontext mit dem Flutter Counter-Projekt.

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,
    );
  }
}

In diesem Beispiel verwende ich ein Inline-Ternär, um die Variablen Text und onPressed bedingt festzulegen, es kann jedoch sinnvoller sein, diese Funktion in eine Funktion zu extrahieren (mit derselben Methode können Sie auch den Text der Schaltfläche ändern):

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

Laut den Unterlagen:

"Wenn der onPressed Callback NULL ist, wird die Schaltfläche deaktiviert und ähnelt standardmäßig einer flachen Schaltfläche in der disabledColor."

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

Sie könnten also so etwas tun:

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

Bei einer bestimmten und begrenzten Anzahl von Widgets führt das Umschließen in ein Widget IgnorePointer genau Folgendes aus: Wenn die ignoring -Eigenschaft auf true festgelegt ist, ist das Unter-Widget (eigentlich die gesamte Unterstruktur) nicht anklickbar. 

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

Wenn Sie eine ganze Teilstruktur deaktivieren möchten, schauen Sie sich AbsorbPointer () an. 

5
edmond

Die einfache Antwort lautet: onPressed : null gibt eine deaktivierte Schaltfläche aus.

4
Mercy peka

Die Funktionen zum Aktivieren und Deaktivieren sind für die meisten Widgets identisch.

Ex, Taste, Schalter, Checkbox etc.

Setzen Sie einfach die Eigenschaft onPressed wie unten gezeigt

onPressed : null Gibt Deaktiviertes Widget zurück

onPressed : (){} oder onPressed : _functionName gibt Aktiviertes Widget zurück

4
Vicky Salunkhe

Sie können Schaltflächen auf diese Weise aktivieren oder deaktivieren

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

Sie können auch den AbsorbPointer verwenden und auf folgende Weise verwenden:

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

Wenn Sie mehr über dieses Widget erfahren möchten, können Sie den folgenden Link überprüfen Flutter Docs

1