dart 如何在Flutter中访问MaterialState集合?

dgsult0t  于 2024-01-04  发布在  Flutter
关注(0)|答案(2)|浏览(207)

我需要创建ElevatedButton,它使用SvgPicture来显示它里面的图标。我已经在ButtonStyle里面定义了foregroundColor来根据当前的MaterialState来解析颜色。然而,这个foregroundColor只应用于文本和图标部件。我如何才能以同样的方式为我的SvgPicture部件解析这个颜色?或者至少可以访问我的ElevatedButton的MaterialState集?
我试图研究Flutter如何为ElevatedButton存储一组MaterialState,但还没有找到它。此外,我遇到了MaterialStateMixin,据我所知,它的目的只是在GestureDetector,InkWell等的帮助下在Flutter中创建自定义按钮。

hc2pp10m

hc2pp10m1#

我相信你正在寻找的是MaterialStatesController,它暴露了小部件的材料状态Set<MaterialState>
https://api.flutter.dev/flutter/material/MaterialStatesController-class.html

  1. class _SvgButtonState extends State<SvgButton> {
  2. late final _statesController = MaterialStatesController();
  3. @override
  4. void dispose() {
  5. _statesController.dispose();
  6. super.dispose();
  7. }
  8. @override
  9. Widget build(BuildContext context) {
  10. return ElevatedButton.icon(
  11. label: const Text('Button'),
  12. statesController: _statesController,
  13. style: ...,
  14. icon: ValueListenableBuilder(
  15. valueListenable: _statesController,
  16. builder: (context, value, child) { // value is Set<MaterialState>
  17. return SvgPicture.asset(
  18. 'assets/...',
  19. colorFilter: value.contains(...) ? ... : ...,
  20. );
  21. },
  22. ),
  23. onPressed: () {},
  24. );
  25. }
  26. }

字符串

展开查看全部
t1rydlwq

t1rydlwq2#

要访问Flutter中的MaterialState集合,您可以使用MaterialStateColor类。但是,需要注意的是,SvgPicture可能不会像Icon那样自动响应MaterialState的更改。在这种情况下,您可能需要手动管理SvgPicture的颜色更改。
这里有一个例子,你可以如何实现这一点:

  1. ElevatedButton(
  2. onPressed: () {
  3. // Your button's onPressed logic
  4. },
  5. style: ButtonStyle(
  6. foregroundColor: MaterialStateColor.resolveWith((Set<MaterialState> states) {
  7. // Resolve color based on MaterialState
  8. if (states.contains(MaterialState.pressed)) {
  9. return Colors.red; // Change to the desired color
  10. }
  11. return Colors.blue; // Default color
  12. }),
  13. ),
  14. child: Row(
  15. mainAxisSize: MainAxisSize.min,
  16. children: [
  17. SvgPicture.asset(
  18. 'assets/your_icon.svg',
  19. // Set the color manually based on MaterialState
  20. color: MaterialStateColor.resolveWith((Set<MaterialState> states) {
  21. if (states.contains(MaterialState.pressed)) {
  22. return Colors.red; // Change to the desired color
  23. }
  24. return Colors.blue; // Default color
  25. }),
  26. ),
  27. SizedBox(width: 8), // Adjust as needed
  28. Text('Button Text'),
  29. ],
  30. ),
  31. )

字符串
在本例中,ElevatedButton的foregroundColor和SvgPicture的颜色都是基于MaterialState手动管理的。根据您的特定用例需要调整颜色和条件。请记住,SVG渲染可能不完全支持基于MaterialState的动态颜色更改,对于更复杂的场景,您可能需要使用替代方法或包。

展开查看全部

相关问题