web-dev-qa-db-ja.com

Flutterでボタンを無効にするにはどうすればよいですか？

Flutterのコツをつかみ始めたばかりですが、ボタンの有効状態を設定する方法がわかりません。

ドキュメントから、ボタンを無効にするにはonPressedをnullに設定し、ボタンを有効にするには値を指定するように指示されています。ライフサイクルの間、ボタンが同じ状態のままである場合、これは問題ありません。

何らかの方法でボタンの有効状態（またはonPressedコールバック）を更新できるカスタムステートフルウィジェットを作成する必要があるという印象を受けます。

だから私の質問はどうすればいいですか？これは非常に簡単な要件のように思えますが、その方法に関するドキュメントには何も見つかりません。

ありがとう。

buttondartflutter
47
chris84948

ボタンのbuildにヘルパー関数を導入し、キーオフするプロパティとともにステートフルウィジェットを導入するとよいと思います。

  • StatefulWidget/Stateを使用して、条件を保持する変数を作成します（例：isButtonDisabled）
  • 最初にこれをtrueに設定します（必要な場合）
  • ボタンをレンダリングするとき、onPressed値をnullまたは何らかの関数onPressed: () {}に直接設定しないでください。
  • 代わりに、3項関数またはヘルパー関数を使用して条件付きで設定します（以下の例）
  • この条件の一部として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,
    );
  }
}

この例では、インライン変数を使用してTextとonPressedを条件付きで設定していますが、これを関数に抽出する方が適切な場合があります（この同じメソッドを使用してボタンのテキストも変更できます）。

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

ドキュメントによると：

「onPressedコールバックがnullの場合、ボタンは無効になり、デフォルトではdisabledColorのフラットボタンに似ています。」

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

だから、あなたはこのようなことをするかもしれません：

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

簡単な答えは、onPressed : nullは無効なボタンを提供します。

18
BINAY THAPA MAGAR

特定の限られた数のウィジェットの場合、ウィジェットでラップする IgnorePointer はまさにこれを行います：ignoringプロパティがtrueに設定されている場合、サブウィジェット（実際には、サブツリー全体）クリックできません。

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

それ以外の場合、サブツリー全体を無効にする場合は、AbsorbPointer（）を調べます。

6
edmond

有効化と無効化の機能は、ほとんどのウィジェットで同じです。

例、ボタン、スイッチ、チェックボックスなど.

以下に示すようにonPressedプロパティを設定するだけです

onPressed : nullは無効なウィジェットを返します

onPressed : (){}またはonPressed : _functionNameは、有効なウ​​ィジェットを返します

4
Vicky Salunkhe

このようなボタンを有効または無効にすることができます

RaisedButton(onPressed: isEnabled ? _handleClick : null)
3
CopsOnRoad

AbsorbPointerを使用することもでき、次の方法で使用できます。

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

このウィジェットについて詳しく知りたい場合は、次のリンクを確認してください Flutter Docs

2
Juan E. Londoño T.