我如何禁用一个按钮颤振?

我刚开始掌握Flutter的窍门，但我不知道如何设置按钮的启用状态。

在文档中，它说将onPressed设置为null来禁用按钮，并给它一个值来启用它。如果按钮在生命周期中继续处于相同的状态，这是没问题的。

我得到的印象是，我需要创建一个自定义的有状态小部件，它将允许我以某种方式更新按钮的启用状态(或onPressed回调)。

我的问题是我该怎么做?这似乎是一个非常简单的要求，但我在文档中找不到任何关于如何做到这一点的东西。

谢谢。

273839 次浏览
小开
最佳答案

我认为你可能想要引入一些帮助函数build你的按钮，以及一个有状态的小部件，以及一些属性来关闭键。

  • 使用StatefulWidget/State并创建一个变量来保存你的条件(例如isButtonDisabled)
  • 初始设置为true(如果这是你想要的)
  • 在呈现按钮时，不要直接设置onPressed值为null或某个函数onPressed: () {}
  • 而不是，使用三元或辅助函数(下面的例子)有条件地设置它
  • 检查isButtonDisabled作为条件的一部分，并返回null或一些函数。
  • 当按钮被按下时(或者当你想禁用按钮时)，使用setState(() => isButtonDisabled = true)来翻转条件变量。
  • Flutter将再次调用带有新状态的build()方法，按钮将使用null按下处理程序呈现并被禁用。

这里是一些更多的上下文使用颤振计数器项目。

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();
};
}
}
小开

根据文档:

如果onPressed回调为空，则该按钮将被禁用 ，默认情况下类似于disabledColor.

. 0中的平面按钮

所以，你可以这样做:

RaisedButton(
onPressed: calculateWhetherDisabledReturnsBool() ? null : () => whatToDoOnPressed,
child: Text('Button text')
);
小开

简单的答案是onPressed : null给出了一个禁用按钮。

小开

对于特定且数量有限的小部件，将它们包装在小部件IgnorePointer中正是这样做的:当它的ignoring属性被设置为true时，子小部件(实际上是整个子树)是不可点击的。

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

否则，如果您打算禁用整个子树，请查看AbsorbPointer()。

小开

禁用点击:

onPressed: null

可以点击:

onPressed: () => fooFunction()
// or
onPressed: fooFunction

组合:

onPressed: shouldEnable ? fooFunction : null
小开

你也可以使用吸收指针，你可以用下面的方式使用它:

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

如果你想了解更多关于这个小部件的信息，你可以查看下面的链接颤振文档

小开

大多数小部件的启用和禁用功能是相同的。

前，按钮，开关，复选框等。

只需设置onPressed属性，如下所示

onPressed : null返回残疾的小部件

onPressed : (){}或onPressed : _functionName返回使小部件

小开

在我看来，这是最简单的方法:

RaisedButton(
child: Text("PRESS BUTTON"),
onPressed: booleanCondition
? () => myTapCallback()
: null
)
小开

你也可以设置空白条件，在设置null的地方

         var isDisable=true;


   



RaisedButton(
padding: const EdgeInsets.all(20),
textColor: Colors.white,
color: Colors.green,
onPressed:  isDisable
? () => (){} : myClickingData(),
child: Text('Button'),
)
小开

我喜欢为此使用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;

然后在控件中，您可以随心所欲地操作这个变量。

参考文献。: 颤振mobx

小开

为了禁用颤振中的任何按钮，如FlatButton， RaisedButton， MaterialButton， IconButton等，你所需要做的就是将onPressed和onLongPress属性设置为零。下面是一些按钮的简单示例:

FlatButton(启用)

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'),
),

enter image description here enter image description here

FlatButton(禁用)

FlatButton(
onPressed: null,
onLongPress: null,
textColor: Colors.black,
disabledColor: Colors.orange,
disabledTextColor: Colors.white,
child: Text('Flat Button'),
),

enter image description here

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'),
),

enter image description here

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'),
),

enter image description here

IconButton(启用)

IconButton(
onPressed: () {},
icon: Icon(Icons.card_giftcard_rounded),
color: Colors.lightBlueAccent,
            

disabledColor: Colors.orange,
),

enter image description here enter image description here

IconButton(禁用)

IconButton(
onPressed: null,
icon: Icon(Icons.card_giftcard_rounded),
color: Colors.lightBlueAccent,
            

disabledColor: Colors.orange,
),

enter image description here

请注意:一些按钮，如IconButton，只有onPressed属性。

小开

这个答案是基于更新的按钮TextButton/ElevatedButton/OutlinedButton为Flutter 2.x

不过，按钮是基于onPressed属性启用或禁用的。如果该属性为空，则按钮将被禁用。如果你将函数分配给onPressed，那么按钮将被启用。 在下面的代码片段中，我已经展示了如何启用/禁用按钮，并相应地更新它的样式
这篇文章也说明了如何应用不同的风格到新的 颤振2。x按钮。< / p >

enter image description here

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;
});
},
),
],
)
],
),
],
),
),
);
}
}
小开

如果你正在寻找一种快速的方法，而不关心让用户在一个按钮上点击多次。你也可以这样做:

// 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);
}
}
小开

你可以在你的应用程序中使用这段代码for button with loading和disable:

class BtnPrimary extends StatelessWidget {
bool loading;
String label;
VoidCallback onPressed;


BtnPrimary(
{required this.label, required this.onPressed, this.loading = false});


@override
Widget build(BuildContext context) {
return ElevatedButton.icon(
icon: loading
? const SizedBox(
child: CircularProgressIndicator(
color: Colors.white,
),
width: 20,
height: 20)
: const SizedBox(width: 0, height: 0),
label: loading ? const Text('Waiting...'): Text(label),
onPressed: loading ? null : onPressed,
);
}
}

希望有用😊

小开

这是在Flutter中禁用按钮的最简单方法，将null值分配给onPressed

ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue, // background
onPrimary: Colors.white, // foreground
),
onPressed: null,
child: Text('ElevatedButton'),
),
小开

也许有人会觉得这个有用。对我来说，这是实现常规“禁用逻辑”的最简单方法。与灰色的任何类型的子小部件，防止点击:

AbsorbPointer(
absorbing: _isDisabled,
child: Opacity(
opacity: _isDisabled ? 0.5 : 1,
child: YourWidgetHere()
)
)
小开

见下面的可能的解决方案，添加'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),
),
),
),

/ / texfield

 TextField(controller: textFieldController,
onChanged: (newValue) {
textFieldText = newValue;
},
),

生成器将监听控制器，并仅在使用文本字段时启用按钮。我希望这能回答问题。让我知道…

小开

有两种方法:

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
),
),
...

提交答案