当前位置: 首页 > 知识库问答 >
问题:

Flutter-多个图标改变颜色每个图标

鲜于光赫
2023-03-14

我有4个图标在底部栏在我的应用程序,我需要改变颜色的图标从灰色到白色,我遵循这个问题,但当我按任何图标所有图标改变颜色在同一时间,我需要当按例如(主页)图标只按(主页)图标。

我怎么能这么做??

代码:

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  _HomePageState();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
  bool isPressed = false;

  _pressed() {
  var newVal = true;
  if(isPressed) {
    newVal = false;
  } else {
    newVal = true;
  }

  setState((){
  isPressed = newVal;
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(

    appBar: AppBar(
      title: Image.asset('assets/logo.png', fit: BoxFit.cover,),
      centerTitle: true,
      backgroundColor: Colors.grey[900],
    ),
    bottomNavigationBar: BottomAppBar(
      color: Colors.grey[900],
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(icon: Icon(Icons.info), color: isPressed ? Colors.white:Colors.grey[600], iconSize: 30, onPressed: () {
          setState(() {
            _pressed();
          });
        }),
          IconButton(icon: Icon(Icons.local_mall), color: isPressed ? Colors.white:Colors.grey[600], iconSize: 30, onPressed: () {
          setState(() {
            _pressed();
          });
        }),
          IconButton(icon: Icon(Icons.bookmark), color: isPressed ? Colors.white:Colors.grey[600], iconSize: 30, onPressed: () {
          setState(() {
            _pressed();
          });
        }),
          IconButton(icon: Icon(Icons.home), color: isPressed ? Colors.white:Colors.grey[600], iconSize: 30, onPressed: () {
          setState(() {
            _pressed();
          });
        }),
      ],
    ),
  ),

);
}
}

共有1个答案

有权
2023-03-14

你可以这样做!!切换图标颜色的最佳技巧

   IconButton( icon:  ImageIcon(AssetImage("images/edit.png",) ,size: 30,),
                            disabledColor: Color.fromRGBO(32, 127, 195, 1),
                            color: Colors.white,
                            onPressed: a == 1
                                ? null
                                : () => setState(() => a = 1)),
 IconButton( icon:   ImageIcon(AssetImage("images/notify.png",) ,size: 30,),
                            disabledColor: Color.fromRGBO(32, 127, 195, 1),
                            color: Colors.white,
                            onPressed: a == 2
                                ? null
                                : () => setState(() {
                                      a = 2;
                                      dateTemp = '';
                                    })),
 类似资料:
  • 问题内容: 如何更改图标的内部(白色)颜色 ? PS应用不是答案,因为红色适用于外部颜色,而不适用于内部感叹号白色标牌本身。 真棒字体版本是:4.7.0。 问题答案: 此图标的感叹号是透明的部分,因此一个技巧是在其后面添加背景以具有所需的颜色。当然,背景不应该覆盖整个区域,因此我们需要使用渐变来覆盖其中的一部分。 V4也是如此: 也是SVG版本: 更新 为了使答案更通用,我们还可以考虑多个背景和径

  • 我创建了一个包含单个项目的菜单。 这是我在工具栏中的一些活动中使用的,单击时它会下拉一个菜单,目前只有一个选项,但将来可能会更多。 除了图标外,一切都很好,它是传统3点白色的矢量图像。根据showAsAction在更改颜色时的设置。 目前show AsAction设置为从不,因此单击时会显示一个菜单,这就是我想要的,但是图标变为深灰色。如果我将此选项设置为“始终”,则图标变为白色,但我丢失了下拉菜

  • 我的css代码: 不确定我是否使用了正确的图标等fa-facebook-square,以及它是否被锁定为透明。

  • 下图显示了一个问题。 正常状态 当背景颜色改为白色时,我的图标不会只改为黑色

  • 我正在尝试使用ChartJS创建一个条形图,如下所示: 我想知道如何分别为每个条添加渐变颜色,并根据它们的高度添加渐变颜色。 我在这里找到了一个非常接近的解决方案,但它为整个图形设置了,而不是单个条。 另外,如果我为每个条创建渐变,这个解决方案更接近,但是,我想根据条的高度设置渐变。 有没有办法指定根据酒吧高度,而不是坐标上的

  • 目前我的html如下所示: 我尝试执行以下CSS,但没有任何结果: