[解決済み] 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,
);
}
}
この例では、インラインの三項演算子を使って、条件付きで
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();
};
}
}
関連
-
[解決済み] Flutter - くねくね動くアニメーションを作るには?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] Flutterで丸みを帯びたボタン/border-radius付きボタンを作成する
-
[解決済み】Dartの名前付きパラメータと位置付きパラメータの違いは何ですか?
-
[解決済み】flutterでパッケージ名を変更する方法は?
-
[解決済み】再利用可能なウィジェットを作成するための関数とクラスの違いは何ですか?
-
[解決済み] ポップアップ時にFlutterナビゲータの状態を再読み込みするように強制する
-
[解決済み] Flutter 継承されたウィジェットを正しく使うには?
-
[解決済み] Flutter FirestoreでD8が発生:要求されたクラスを単一のdexファイルに収められない (# methods: 71610 > 65536) in Android Studio
-
[解決済み] Flutterアプリのビルド番号とバージョン番号を取得する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] FlutterでborderRadiusを使用してコンテナにボーダーを追加する
-
[解決済み】FlutterでToastを作成する方法
-
[解決済み】Flutterで背景画像を設定する方法は?
-
[解決済み] Flutterでボタンの幅と高さを設定する方法は?
-
[解決済み] フラッター エキスパンドとフレキシブル
-
[解決済み] フラッターは2つのアイテムを左と右の両極端に配置します。
-
[解決済み] Flutterで「戻る」ボタンを上書きするには?[重複している]。
-
[解決済み] Flutterで "すりガラス "のような効果を出すには?
-
[解決済み] dispose() の後に setState() が呼ばれる。
-
[解決済み] FlutterでtextAlignプロパティはどのような状況で動作しますか?