flutter 互斥点击代码
时间: 2023-10-15 17:05:51 浏览: 87
好的,关于flutter互斥点击代码,可以使用GestureDetector组件来实现。具体的代码实现如下:
```
import 'package:flutter/material.dart';
class MutexButton extends StatefulWidget {
final Widget child;
final VoidCallback onPressed;
MutexButton({
Key key,
@required this.child,
@required this.onPressed,
}) : super(key: key);
@override
_MutexButtonState createState() => _MutexButtonState();
}
class _MutexButtonState extends State<MutexButton> {
bool _isButtonDisabled = false;
void _onButtonPressed() async {
if (!_isButtonDisabled) {
setState(() => _isButtonDisabled = true);
widget.onPressed();
await Future.delayed(Duration(seconds: 2));
setState(() => _isButtonDisabled = false);
}
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: _onButtonPressed,
child: Opacity(
opacity: _isButtonDisabled ? 0.5 : 1,
child: widget.child,
),
);
}
}
```
在代码中,我们定义了一个MutexButton组件,该组件包含两个属性:child和onPressed,分别代表按钮的文本和按钮被按下时触发的事件。
在_MutexButtonState中,我们使用_isButtonDisabled变量来控制按钮是否可点击。当按钮被按下时,我们会先将按钮的状态设置为不可点击,然后执行传入的onPressed事件,并延迟2秒后再将按钮状态设置为可点击。
在build中,我们使用GestureDetector组件来响应按钮的点击事件,并使用Opacity组件来根据按钮是否可点击来控制按钮的不透明度。
使用MutexButton组件时,只需要将按钮的代码封装在MutexButton组件中即可,如下所示:
```
MutexButton(
child: Text('Button'),
onPressed: () {
// 按钮点击事件的代码
},
),
```
这样就可以很方便地实现按钮的互斥点击效果了。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231044955.png)
![-](https://img-home.csdnimg.cn/images/20241231044736.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)