flutter 按下按钮时更改图标的颜色

68de4m5k  于 2023-02-25  发布在  Flutter
关注(0)|答案(3)|浏览(352)

如何在按下按钮时更改图标的颜色,使其保持新颜色,并且在第二次按下或退出应用程序后不会更改。
示例:

crcmnpdw

crcmnpdw1#

在本地数据中保存按钮状态,并在创建按钮颜色UI时使用此数据。在Flutter中有保存和读取数据的方法,
有几个选项:

2o7dmzc5

2o7dmzc52#

使用ValueNotifier通知按钮的颜色。

ValueNotifier<Set<int>> colorButton = ValueNotifier([]);

内码

ValueListenableBuilder(
  valueListenable: colorButton,
  builder: (BuildContext context, Set<int> colorButtonValue, _) {       
    if (colorButtonValue.isNotEmpty) {
      return GestureDetector(
        onTap: () {
          colorButton.value.remove(idIndex);
          colorButton.notifyListeners();
        },
        child: IconButton(
          icon: Icons.emoji_emotions,                             
          color: whiteColor
        ),
      );
    } else {
      return GestureDetector(
        onTap: () {
          colorButton.value.add(idIndex);
          colorButton.notifyListeners();
        },
        child: IconButton(
          icon: Icons.emoji_emotions,                         
          color: redColor,
        ),
      );
    }
  },
),
4ngedf3f

4ngedf3f3#

您可以通过以下几种方式来执行此操作:使用StatefulWidget、Bloc、Provider、ValueListenable等。最简单的方法是StatefulWidget。您必须将按钮的当前状态保存在部件状态的变量上,然后调用Button部件的onPressed参数的setState()方法。因此,在Icon部件上,您根据按钮状态选择颜色。部件状态应如下所示:

...
class _SampleWidgetState extends State<SampleWidget> {
  bool _buttonIsPressed = false;
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
        child: Icon(
            Icons.remove_red_eye_rounded,
            color: _buttonIsPressed? Colors.blueAccent : Colors.white
        ),
        onPressed: (){
            setState(() {
              _buttonIsPressed = !_buttonIsPressed;
            });
        }
    );
  }
}

但是,记住,朋友。在用户界面上尽可能少的使用逻辑。只是一些像颜色之类的小东西。

相关问题