按下时更改按钮上的背景颜色和图标[关闭]

Question

我有带有图标的按钮作为指示器。它们有背景颜色和图标颜色。我希望这些按钮在单击时更改其背景颜色和图标颜色，并保持这种状态直到下一次单击。

这就是我的实现方式：

Widget _deviceManagement() {return Padding(
    padding: const EdgeInsets.only(left: 16, right: 16, bottom: 20),
    child: Container(
      height: 86,
      decoration: ShapeDecoration(
        color: secondary,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
      ),
      child: Row(
        children: <Widget>[
          _doubleTear(),
          const Spacer(),
          _lightbulb(),
          const Spacer(),
          _megaphone(),
          const Spacer(),
          _water(),
          const Spacer(),
          _expandButton(),
        ],
      ),
    ),
  );
}

这是一个块元素的样子：

Widget _doubleTear() {return Padding(
    padding: const EdgeInsets.only(left: 12),
    child: Container(
      width: 54,
      height: 54,
      decoration: ShapeDecoration(
        color: tertiary,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
      ),
      child: MaterialButton(
        onPressed: () {
        },
        elevation: 0,
        color: tertiary,
        splashColor: Main,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
        child: SvgPicture.asset('assets/images/li-double-tear.svg', color: textSecondary)
      )
    ),
  );
}

我尝试过各种按钮，例如升降按钮等，但我只能在按下按钮时改变颜色，但是当我松开按钮时，颜色又变成相同的颜色。

Answer 1

您可以使用ToggleButtons（带或不带多选），并按照您想要的方式设置其样式。

如果你想使用

ElevatedButton

那么你需要引入一个布尔字段来存储按钮的状态（如果它是否被激活）并根据该布尔值在样式之间切换。