1. ホーム
  2. ヒラメキ

[解決済み] FlutterでButtonを無効にするには?

2022-03-12 11:37:03

質問

Flutterを使い始めたばかりなのですが、ボタンの有効状態を設定する方法がわからなくて困っています。

ドキュメントを見ると onPressed を null に設定するとボタンが無効になり、値を設定すると有効になります。ボタンがライフサイクルの間、同じ状態であり続けるのであれば、これは問題ないでしょう。

ボタンの有効状態(またはonPressedコールバック)を何らかの方法で更新できるようにするために、カスタムのStatefulウィジェットを作成する必要があるような気がします。

そこで質問ですが、どのようにすればいいのでしょうか?これはかなり簡単な要求のように思えますが、それを行う方法についてのドキュメントを見つけることができません。

ありがとうございます。

解決方法は?

にいくつかのヘルパー関数を導入するのが良いかと思います。 build ボタンと同様に、Stateful ウィジェットも、キーオフするためのいくつかのプロパティと同様です。

  • StatefulWidget/Stateを使用し、条件を保持する変数を作成します(例. isButtonDisabled )
  • 初期値としてtrueを設定する(希望する場合のみ)
  • ボタンをレンダリングするとき を直接設定しないでください。 onPressed のどちらかに値を設定します。 null または何らかの関数 onPressed: () {}
  • 代わりに を使うか、三項演算子やヘルパー関数を使って条件付きで設定します。 (以下の例)
  • を確認します。 isButtonDisabled をこの条件の一部とし、どちらかを返します。 null または何らかの関数。
  • ボタンが押されたとき(またはボタンを無効にしたいとき)には、次のように使用します。 setState(() => isButtonDisabled = true) を使って条件変数を反転させます。
  • Flutterは build() メソッドが新しい状態で再度レンダリングされ、ボタンが null プレスハンドラで無効化されます。

以下は、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,
    );
  }
}

この例では、インラインの三項演算子を使って、条件付きで TextonPressed が、これを関数に展開した方が適切かもしれません(これと同じ方法で、ボタンのテキストも変更できます)。

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