我刚开始掌握Flutter的窍门，但我不知道如何设置按钮的启用状态。
从文档中，它说将onPressed设置为null来禁用按钮，并给它一个值来启用它。如果按钮在生命周期中继续处于相同的状态，这是没问题的。
我得到的印象是，我需要创建一个自定义的有状态小部件，它将允许我以某种方式更新按钮的启用状态(或onPressed回调)。
我的问题是我该怎么做?这似乎是一个非常简单的要求，但我在文档中找不到任何关于如何做到这一点的东西。
谢谢。
当前回答
我喜欢为此使用flutter_mobx，并对状态进行处理。
接下来我使用一个观察者:
Container(child: Observer(builder: (_) {
var method;
if (!controller.isDisabledButton) method = controller.methodController;
return RaiseButton(child: Text('Test') onPressed: method);
}));
控制器侧:
@observable
bool isDisabledButton = true;
然后在控件中，您可以随心所欲地操作这个变量。
参考文献。: Flutter mobx
其他回答
这是在Flutter中禁用按钮的最简单的方法是将空值分配给onPressed
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue, // background
onPrimary: Colors.white, // foreground
),
onPressed: null,
child: Text('ElevatedButton'),
),
如果你正在寻找一种快速的方法，而不关心让用户在一个按钮上点击多次。你也可以这样做:
// Constant whether button is clicked
bool isClicked = false;
然后在onPressed()函数中检查用户是否已经单击了按钮。
onPressed: () async {
if (!isClicked) {
isClicked = true;
// await Your normal function
} else {
Toast.show(
"You click already on this button", context,
duration: Toast.LENGTH_LONG, gravity: Toast.BOTTOM);
}
}
这个答案是基于更新的按钮TextButton/ElevatedButton/OutlinedButton颤振2.x
不过，按钮是基于onPressed属性启用或禁用的。如果该属性为空，则按钮将被禁用。如果你将函数分配给onPressed，那么按钮将被启用。 在下面的代码片段中，我展示了如何启用/禁用按钮，并相应地更新它的样式。
这篇文章也说明了如何将不同的风格应用到新的 颤振2。x按钮。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool textBtnswitchState = true;
bool elevatedBtnSwitchState = true;
bool outlinedBtnState = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton(
child: Text('Text Button'),
onPressed: textBtnswitchState ? () {} : null,
style: ButtonStyle(
foregroundColor: MaterialStateProperty.resolveWith(
(states) {
if (states.contains(MaterialState.disabled)) {
return Colors.grey;
} else {
return Colors.red;
}
},
),
),
),
Column(
children: [
Text('Change State'),
Switch(
value: textBtnswitchState,
onChanged: (newState) {
setState(() {
textBtnswitchState = !textBtnswitchState;
});
},
),
],
)
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
child: Text('Text Button'),
onPressed: elevatedBtnSwitchState ? () {} : null,
style: ButtonStyle(
foregroundColor: MaterialStateProperty.resolveWith(
(states) {
if (states.contains(MaterialState.disabled)) {
return Colors.grey;
} else {
return Colors.white;
}
},
),
),
),
Column(
children: [
Text('Change State'),
Switch(
value: elevatedBtnSwitchState,
onChanged: (newState) {
setState(() {
elevatedBtnSwitchState = !elevatedBtnSwitchState;
});
},
),
],
)
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
OutlinedButton(
child: Text('Outlined Button'),
onPressed: outlinedBtnState ? () {} : null,
style: ButtonStyle(
foregroundColor: MaterialStateProperty.resolveWith(
(states) {
if (states.contains(MaterialState.disabled)) {
return Colors.grey;
} else {
return Colors.red;
}
},
), side: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.disabled)) {
return BorderSide(color: Colors.grey);
} else {
return BorderSide(color: Colors.red);
}
})),
),
Column(
children: [
Text('Change State'),
Switch(
value: outlinedBtnState,
onChanged: (newState) {
setState(() {
outlinedBtnState = !outlinedBtnState;
});
},
),
],
)
],
),
],
),
),
);
}
}
你也可以使用吸收指针，你可以用下面的方式使用它:
AbsorbPointer(
absorbing: true, // by default is true
child: RaisedButton(
onPressed: (){
print('pending to implement onPressed function');
},
child: Text("Button Click!!!"),
),
),
如果您想了解有关此小部件的更多信息，可以查看以下链接Flutter Docs
禁用点击:
onPressed: null
可以点击:
onPressed: () => fooFunction()
// or
onPressed: fooFunction
组合:
onPressed: shouldEnable ? fooFunction : null
