flutter 禁用/更改按钮的颜色一定的秒数，如果它被点击

eeq64g8w 于 2023-06-24 发布在 Flutter

关注(0)|答案(2)|浏览(121)

我有个问题我想禁用按钮3秒，如果用户点击它。3秒后，用户应该能够再次单击按钮。我创建了一个变量_hasBeenPressed。但问题是我的输出并不是我所希望的。什么都没发生。如果我点击按钮，按钮的颜色不会改变。
那么，如果按下按钮并在此期间禁用onTap，我如何在3秒钟内更改按钮的颜色？

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import '../utils/definitions.dart';
import 'icons.dart';
import '../model/label.dart';

class LabelButton extends StatefulWidget {
  final Label? label;
  final VoidStringCallback? process;

  LabelButton({required this.label, required this.process, Key? key})
      : super(key: key);

  @override
  State<LabelButton> createState() => _LabelButtonState();

  const LabelButton._(this.label, this.process, {Key? key})
      : super(key: key);

  static LabelButton createBlank() {
    return const LabelButton._(null, null);
  }
}

class _LabelButtonState extends State<LabelButton> {
  bool _hasBeenPressed = false;

  @override
  Widget build(BuildContext context) {


    if (widget.label != null) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(12),
          child: Material(
            child: InkWell(
              highlightColor: Color(0xFF00D3F8).withOpacity(0.3),
              splashColor: Color(0xFFB20DD3).withOpacity(0.3),

              onTap: () {
                setState(() async {
                  /*Timer(Duration(seconds: 3), (){
                    _hasBeenPressed = !_hasBeenPressed;
                    print("inside" + _hasBeenPressed.toString()); //prints true
                     });
                  _hasBeenPressed = !_hasBeenPressed;
                  print(_hasBeenPressed); // prints false
                  */
                  _hasBeenPressed = true;
                  print("CLICKED");
                  await Future.delayed(const Duration(seconds: 3), () {
                    print("nach");
                    _hasBeenPressed = false;
                  });
                  print(_hasBeenPressed);
                });

                widget.process!(widget.label!.identifier, widget.label!.category, widget.label!.id);
                HapticFeedback.lightImpact();
              },
              child: Ink(
                width: 100, // Breite anpassen
                height: 120, // Höhe anpassen
                //padding: const EdgeInsets.all(10.0),
                decoration: BoxDecoration(
                  color: _hasBeenPressed ? const Color(0xFFB6B6B6) : Colors.green
                  /*border: Border.all(
                color: Colors.black, // Rahmenfarbe anpassen
                width: 2, // Rahmendicke anpassen
              ),*/

                  //borderRadius: BorderRadius.circular(12), // Eckradius anpassen
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(iconList
                        .firstWhere((element) => element.name == widget.label!.uiIcon)
                        .icon,
                      size: 80,),
                    /*const Icon(CustomIcons.construction,
                      size: 80,),*/
                    Text(widget.label!.categoryName,
                          style: const TextStyle(
                            color: Color(0xFF696969),
                            //fontWeight: FontWeight.bold,
                          )),
                    Text(widget.label!.name,
                        style: const TextStyle(
                        fontWeight: FontWeight.bold,
                      )), // Text unter dem Icon
                  ],
                ),
              ),
            ),
          )

        )

      );
    }
    else {
      return Container();
    }

  }
}

flutter

来源：https://stackoverflow.com/questions/76507085/disable-change-the-color-of-a-button-for-a-certain-seconds-if-it-was-clicked

2条答案

按热度按时间

3lxsmp7m1#

您正在等待几秒钟，然后才发射setState((){});。这就是问题的根源。

....
onTap: () async {
   ........

   _hasBeenPressed = true;
   setState(() {});
   await Future.delayed(const Duration(seconds: 3), () {
        print("nach");
        _hasBeenPressed = false;
        setState(() {});
   });

   ............
}

赞(0）回复(0）举报 2023-06-24

egdjgwm82#

我不知道你想干什么。
但是你需要纠正一些事情，例如，setState(() async { setState不能异步完成。你可以做如下。

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool hasclicked = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: InkWell(
              onTap: () async {
                if (hasclicked) {
                  setState(() {
                    hasclicked = !hasclicked;
                  });
                } else {
                  await Future.delayed(const Duration(seconds: 3), () {
                    setState(() {
                      hasclicked = !hasclicked;
                    });
                  });
                }
              },
              child: Container(
                  decoration: BoxDecoration(
                    color: hasclicked ? Colors.red : Colors.green,
                  ),
                  child: Text(
                    'Hello, World!',
                    style: Theme.of(context).textTheme.headlineMedium,
                  ))),
        ),
      ),
    );
  }
}

如果你想的话

赞(0）回复(0）举报 2023-06-24

我来回答

flutter 禁用/更改按钮的颜色一定的秒数，如果它被点击

2条答案

相关问题

热门标签

最新问答