如何使用 ontap 实时调整动画容器的边框

Question

是否可以使用 ontap 实时删除动画容器上的边框？ 默认情况下不应显示边框，但单击时应显示边框。 见下面的代码：

 AnimatedContainer(
                              duration: Duration(milliseconds: 200),
                              width: isTextOpen ? 180 : 45, height: 30,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(3)),
                              border: Border.all(color: Colors.deepOrangeAccent),
                            ),
                            child: isTextOpen ?

                                TextField(

                                )
                                : GestureDetector(
                              onTap: (){
                                setState(() {
                                  isTextOpen=true;
                                });
                              },
                              child: Text(
                                "User_002",
                              ),
                            ),
                          ),

Answer 1

如果不满足某个条件，您可以将border设置为null如果满足某个条件，则可以给它一个border 。

我使用您的代码添加了一个演示作为示例：

AnimatedContainer(
      duration: Duration(milliseconds: 200),
      width: isTextOpen ? 180 : 45,
      height: 30,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(3)),
        // give it border based on a condition
        border: isTextOpen ? Border.all(color: Colors.deepOrangeAccent, width: 3.0,) : null , // new line
      ),
      child: isTextOpen
          ? TextField()
          : GestureDetector(
              onTap: () {
                setState(() {
                  isTextOpen = true;
                });
              },
              child: Text(
                "User_002",
              ),
            ),
    );