Question

我刚刚创建了一个简单的可选2 IconButton，如下所示：

class _RadioBtnSimState extends State<RadioBtnSim> {
  bool _isSelectedLeftButton = true;
  bool _isSelectedRightButton = false;

  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Column(
            children: [
              Ink(
                height: _isSelectedLeftButton ? 80.0 : 60.0,
                width: _isSelectedLeftButton ? 80.0 : 60.0,
                decoration: ShapeDecoration(
                  color: _isSelectedLeftButton
                      ? Colors.green.withOpacity(0.50)
                      : Colors.grey.withOpacity(0.50),
                  shape: CircleBorder(),
                ),
                child: IconButton(
                  icon: Icon(Icons.sim_card),
                  color: Colors.white,
                  iconSize: _isSelectedLeftButton ? 40.0 : 30.0,
                  onPressed: () {
                    setState(() {
                      _isSelectedLeftButton = true;
                      _isSelectedRightButton = false;
                    });
                  },
                ),
              ),
              Text(
                'Sim 1',
                style: _isSelectedLeftButton
                    ? TextStyle(color: Colors.green)
                    : TextStyle(color: Colors.grey),
              ),
            ],
          ),
          SizedBox(
            width: 20.0,
          ),
          Column(
            children: [
              Ink(
                height: _isSelectedRightButton ? 80.0 : 60.0,
                width: _isSelectedRightButton ? 80.0 : 60.0,
                decoration: ShapeDecoration(
                  color: _isSelectedRightButton
                      ? Colors.green.withOpacity(0.50)
                      : Colors.grey.withOpacity(0.50),
                  shape: CircleBorder(),
                ),
                child: IconButton(
                  icon: Icon(Icons.sim_card),
                  color: Colors.white,
                  iconSize: _isSelectedRightButton ? 40.0 : 30.0,
                  onPressed: () {
                    setState(() {
                      _isSelectedLeftButton = false;
                      _isSelectedRightButton = true;
                    });
                  },
                ),
              ),
              Text(
                'Sim 2',
                style: _isSelectedRightButton
                    ? TextStyle(color: Colors.green)
                    : TextStyle(color: Colors.grey),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

现在我所需要的，我想在选择IconButton ...

时创建一个简单的动画

是否有简单易行的方法？

Answer 1

您可以将其包装在带有盒子装饰的AnimatedContainer中。更改后，颜色将自动设置动画。

类似这样的东西：

var buttonColor = Colors.blue;

AnimatedContainer(
width: 100,
height: 100,
decoration: BoxDecoration(color: buttonColor,)
child: yourWidget
)

然后进行更改：

SetState((){
buttonColor = Colors.red // or any other color
})

编辑

在您的情况下，会是这样

class _RadioBtnSimState extends State<RadioBtnSim> {
  bool _isSelectedLeftButton = true;
  bool _isSelectedRightButton = false;
  

  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Column(
            children: [
              AnimatedContainer(
                height: _isSelectedLeftButton ? 80.0 : 60.0,
                width: _isSelectedLeftButton ? 80.0 : 60.0,
                decoration: BoxDecoration(
                  color: _isSelectedLeftButton
                      ? Colors.green.withOpacity(0.50)
                      : Colors.grey.withOpacity(0.50),
                  shape: RoundedRectangleBorder(borderRadius: 20.0),
                ),
                child: IconButton(
                  icon: Icon(Icons.sim_card),
                  color: Colors.white,
                  iconSize: _isSelectedLeftButton ? 40.0 : 30.0,
                  onPressed: () {
                    setState(() {
                      _isSelectedLeftButton = true;
                      _isSelectedRightButton = false;
                    });
                  },
                ),
              ),
              Text(
                'Sim 1',
                style: _isSelectedLeftButton
                    ? TextStyle(color: Colors.green)
                    : TextStyle(color: Colors.grey),
              ),
            ],
          ),
          SizedBox(
            width: 20.0,
          ),
          Column(
            children: [
              Ink(
                height: _isSelectedRightButton ? 80.0 : 60.0,
                width: _isSelectedRightButton ? 80.0 : 60.0,
                decoration: ShapeDecoration(
                  color: _isSelectedRightButton
                      ? Colors.green.withOpacity(0.50)
                      : Colors.grey.withOpacity(0.50),
                  shape: CircleBorder(),
                ),
                child: IconButton(
                  icon: Icon(Icons.sim_card),
                  color: Colors.white,
                  iconSize: _isSelectedRightButton ? 40.0 : 30.0,
                  onPressed: () {
                    setState(() {
                      _isSelectedLeftButton = false;
                      _isSelectedRightButton = true;
                    });
                  },
                ),
              ),
              Text(
                'Sim 2',
                style: _isSelectedRightButton
                    ? TextStyle(color: Colors.green)
                    : TextStyle(color: Colors.grey),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 2

要轻松调整大小和其他许多动画，可以使用animatedContainer，但如果要使用复杂的动画，则必须使用animationController和animatedWidget。

Answer 3

只需将两个Ink小部件都替换为AnimatedContainer并为其指定持续时间即可。

这样-

AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  height: _isSelectedLeftButton ? 80.0 : 60.0,
                  width: _isSelectedLeftButton ? 80.0 : 60.0,
                  decoration: ShapeDecoration(
                    color: _isSelectedLeftButton
                        ? Colors.green.withOpacity(0.50)
                        : Colors.grey.withOpacity(0.50),
                    shape: CircleBorder(),
                  ),
                  child: IconButton(
                    icon: Icon(Icons.sim_card),
                    color: Colors.white,
                    iconSize: _isSelectedLeftButton ? 40.0 : 30.0,
                    onPressed: () {
                      setState(() {
                        _isSelectedLeftButton = true;
                        _isSelectedRightButton = false;
                      });
                    },
                  ),
                ),

在flutter中选择IconButton时如何创建动画

3 个答案: