我刚开始掌握Flutter的窍门,但我不知道如何设置按钮的启用状态。
从文档中,它说将onPressed设置为null来禁用按钮,并给它一个值来启用它。如果按钮在生命周期中继续处于相同的状态,这是没问题的。
我得到的印象是,我需要创建一个自定义的有状态小部件,它将允许我以某种方式更新按钮的启用状态(或onPressed回调)。
我的问题是我该怎么做?这似乎是一个非常简单的要求,但我在文档中找不到任何关于如何做到这一点的东西。
谢谢。
我刚开始掌握Flutter的窍门,但我不知道如何设置按钮的启用状态。
从文档中,它说将onPressed设置为null来禁用按钮,并给它一个值来启用它。如果按钮在生命周期中继续处于相同的状态,这是没问题的。
我得到的印象是,我需要创建一个自定义的有状态小部件,它将允许我以某种方式更新按钮的启用状态(或onPressed回调)。
我的问题是我该怎么做?这似乎是一个非常简单的要求,但我在文档中找不到任何关于如何做到这一点的东西。
谢谢。
当前回答
根据文件:
如果onPressed回调为空,则该按钮将被禁用 默认情况下类似于disabledColor中的平面按钮。
所以,你可以这样做:
RaisedButton(
onPressed: calculateWhetherDisabledReturnsBool() ? null : () => whatToDoOnPressed,
child: Text('Button text')
);
其他回答
见下面的可能的解决方案,添加'ValueListenableBuilder'的'TextEditingValue'监听控制器(TextEditingController),并返回你的函数调用如果控制器。文本不为空,如果为空则返回'null'。
// valuelistenablebuilder环绕按钮
ValueListenableBuilder<TextEditingValue>(
valueListenable: textFieldController,
builder: (context, ctrl, __) => ElevatedButton(
onPressed: ctrl.text.isNotEmpty ? yourFunctionCall : null,
child: Text(
'SUBMIT',
style: GoogleFonts.roboto(fontSize: 20.0),
),
),
),
特克斯菲尔德
TextField(controller: textFieldController,
onChanged: (newValue) {
textFieldText = newValue;
},
),
生成器将监听控制器,并仅在使用文本字段时启用按钮。我希望这能回答问题。让我知道…
为了禁用任何按钮,如FlatButton, RaisedButton, MaterialButton, IconButton等,你需要做的就是将onPressed和onLongPress属性设置为null。下面是一些按钮的简单示例:
FlatButton (Enabled)
FlatButton(
onPressed: (){},
onLongPress: null, // Set one as NOT null is enough to enable the button
textColor: Colors.black,
disabledColor: Colors.orange,
disabledTextColor: Colors.white,
child: Text('Flat Button'),
),
FlatButton(禁用)
FlatButton(
onPressed: null,
onLongPress: null,
textColor: Colors.black,
disabledColor: Colors.orange,
disabledTextColor: Colors.white,
child: Text('Flat Button'),
),
RaisedButton(启用)
RaisedButton(
onPressed: (){},
onLongPress: null, // Set one as NOT null is enough to enable the button
// For when the button is enabled
color: Colors.lightBlueAccent,
textColor: Colors.black,
splashColor: Colors.blue,
elevation: 8.0,
// For when the button is disabled
disabledTextColor: Colors.white,
disabledColor: Colors.orange,
disabledElevation: 0.0,
child: Text('Raised Button'),
),
RaisedButton(禁用)
RaisedButton(
onPressed: null,
onLongPress: null,
// For when the button is enabled
color: Colors.lightBlueAccent,
textColor: Colors.black,
splashColor: Colors.blue,
elevation: 8.0,
// For when the button is disabled
disabledTextColor: Colors.white,
disabledColor: Colors.orange,
disabledElevation: 0.0,
child: Text('Raised Button'),
),
IconButton (Enabled)
IconButton(
onPressed: () {},
icon: Icon(Icons.card_giftcard_rounded),
color: Colors.lightBlueAccent,
disabledColor: Colors.orange,
),
IconButton(禁用)
IconButton(
onPressed: null,
icon: Icon(Icons.card_giftcard_rounded),
color: Colors.lightBlueAccent,
disabledColor: Colors.orange,
),
注意:一些按钮,如IconButton只有onPressed属性。
大多数小部件的启用和禁用功能是相同的。
前,按钮,开关,复选框等。
只需设置onPressed属性,如下所示
onPressed: null返回禁用小部件
onPressed:(){}或onPressed: _functionName返回启用的小部件
我认为您可能需要引入一些帮助函数来构建按钮,以及一个有状态的小部件以及一些要关闭的属性。
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 either null or some function onPressed: () {} Instead, conditionally set it using a ternary or a helper function (example below) Check the isButtonDisabled as part of this conditional and return either null 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 a null press handler and be disabled.
这里是一些更多的上下文使用颤振计数器项目。
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();
};
}
}
有两种方法:
1- https://stackoverflow.com/a/49354576/5499531
2-你可以使用MaterialStatesController:
final _statesController = MaterialStatesController();
然后将状态更改为:
_statesController.update(
MaterialState.disabled,
true, // or false depending on your logic
);
在你的按钮上
ElevatedButton(
onPressed: _onPressed,
statesController: _statesController,
child: Text("Awesome"),
),
此外,你可以改变按钮的风格,当禁用: 在主题设置中:
....
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: colors.primary500, // set your own color
textStyle: button, // set your own style
onPrimary: colors.onPrimary100, // set your own color
enableFeedback: true,
disabledBackgroundColor: colors.primary300, // set your own color
disabledForegroundColor: colors.primary300, // set your own color
disabledMouseCursor: SystemMouseCursors.forbidden, // when is disable the change the cursor type
),
),
...