如何在按下按钮时更改图标的颜色,使其保持新颜色,并且在第二次按下或退出应用程序后不会更改。示例:
crcmnpdw1#
在本地数据中保存按钮状态,并在创建按钮颜色UI时使用此数据。在Flutter中有保存和读取数据的方法,有几个选项:
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, ), ); } }, ),
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; }); } ); } }
但是,记住,朋友。在用户界面上尽可能少的使用逻辑。只是一些像颜色之类的小东西。
3条答案
按热度按时间crcmnpdw1#
在本地数据中保存按钮状态,并在创建按钮颜色UI时使用此数据。在Flutter中有保存和读取数据的方法,
有几个选项:
2o7dmzc52#
使用ValueNotifier通知按钮的颜色。
内码
4ngedf3f3#
您可以通过以下几种方式来执行此操作:使用StatefulWidget、Bloc、Provider、ValueListenable等。最简单的方法是StatefulWidget。您必须将按钮的当前状态保存在部件状态的变量上,然后调用Button部件的onPressed参数的setState()方法。因此,在Icon部件上,您根据按钮状态选择颜色。部件状态应如下所示:
但是,记住,朋友。在用户界面上尽可能少的使用逻辑。只是一些像颜色之类的小东西。