如何在 Flutter 中禁用按钮? [英] How do I disable a Button in Flutter?
问题描述
我刚刚开始掌握 Flutter 的窍门,但我无法弄清楚如何设置按钮的启用状态.
I'm just starting to get the hang of Flutter, but I'm having trouble figuring out how to set the enabled state of a button.
从文档中,它说将 onPressed
设置为 null 以禁用按钮,并为其指定一个值以启用它.如果按钮在生命周期内继续处于相同状态,这很好.
From the docs, it says to set onPressed
to null to disable a button, and give it a value to enable it. This is fine if the button continues to be in the same state for the lifecycle.
我觉得我需要创建一个自定义的有状态小部件,它允许我以某种方式更新按钮的启用状态(或 onPressed 回调).
I get the impression I need to create a custom Stateful widget that will allow me to update the button's enabled state (or onPressed callback) somehow.
所以我的问题是我该怎么做?这似乎是一个非常简单的要求,但我在文档中找不到任何关于如何执行的内容.
So my question is how would I do that? This seems like a pretty straightforward requirement, but I can't find anything in the docs on how to do it.
谢谢.
推荐答案
我想你可能想引入一些辅助函数来build
你的按钮以及一个有状态的小部件以及一些要键的属性关闭.
I think you may want to introduce some helper functions to build
your button as well as a Stateful widget along with some property to key off of.
- 使用 StatefulWidget/State 并创建一个变量来保存您的条件(例如
isButtonDisabled
) - 最初将其设置为 true(如果您愿意的话)
- 渲染按钮时,不要直接将
onPressed
的值设置为null
或某些函数onPressed:(){}
- 相反,使用三元或辅助函数有条件地设置它(下面的示例)
- 检查
isButtonDisabled
作为此条件的一部分并返回null
或某个函数. - 当按钮被按下时(或者当你想禁用按钮时)使用
setState(() => isButtonDisabled = true)
来翻转条件变量. - Flutter 将使用新状态再次调用
build()
方法,按钮将使用null
按下处理程序呈现并被禁用.
- Use a StatefulWidget/State and create a variable to hold your condition (e.g.
isButtonDisabled
) - Set this to true initially (if that's what you desire)
- When rendering the button, don't directly set the
onPressed
value to eithernull
or some functiononPressed: () {}
- Instead, conditionally set it using a ternary or a helper function (example below)
- Check the
isButtonDisabled
as part of this conditional and return eithernull
or some function. - When the button is pressed (or whenever you want to disable the button) use
setState(() => isButtonDisabled = true)
to flip the conditional variable. - Flutter will call the
build()
method again with the new state and the button will be rendered with anull
press handler and be disabled.
这是使用 Flutter counter 项目的更多上下文.
Here's is some more context using the Flutter counter project.
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
,但将其提取到函数中可能更合适(您也可以使用相同的方法来更改按钮的文本):
In this example I am using an inline ternary to conditionally set the Text
and onPressed
, but it may be more appropriate for you to extract this into a function (you can use this same method to change the text of the button as well):
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 中禁用按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!