Question

如您所见，存在2个容器，但是在我的代码Visibility小部件中自动关闭了第二个Container。我想在按下其中一个Container时仅使其中一个可见，而其他两个都不可见。

 child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      AnimatedContainer(
        duration: Duration(milliseconds: 200),
        width: isTextOpen ? 180 : 45,
        height: 30,
        decoration: BoxDecoration(
          borderRadius:
              BorderRadius.all(Radius.circular(3)),
          border: isTextOpen
              ? Border.all(
                  color: Colors.deepOrangeAccent,
                  width: 1.0,
                )
              : null, // new line
        ),
        child: isTextOpen
            ? TextField()
            : GestureDetector(
                onTap: () {
                  setState(() {
                    isTextOpen = true;
                  });
                },
                child: Text(
                  "User_002",
                ),
              ),
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[

          Visibility(
            visible: false,
            child: AnimatedContainer(
              duration: Duration(milliseconds: 200),
              width: kaandeneme ? 166 : 45,
              height: 30,
              decoration: BoxDecoration(
                borderRadius:
                    BorderRadius.all(Radius.circular(3)),
                border: Border.all(
                    color: Colors.deepOrangeAccent),
              ),
              child: kaandeneme
                  ? TextField()
                  : GestureDetector(
                      onTap: () {
                        setState(() {
                          kaandeneme = true;
                        });
                      },
                      child: Text(
                        "27",
                      ),
                    ),
            ),
          ),
        ],
      ),
    ],
  ),

Answer 1

首先，您需要使用Visibility小部件包装两个容器。

whichToShow变量最初设置为0。当此变量为0时，两个容器都是可见的，当它为1时，只有第一个容器可见，而第二个容器也是如此。

int whichToShow = 0;

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Visibility( // this is new
      visible: whichToShow == 1 || whichToShow == 0, // this is new
      child: AnimatedContainer(
        duration: Duration(milliseconds: 200),
        width: isTextOpen ? 180 : 45,
        height: 30,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(3)),
          border: isTextOpen
          ? Border.all(
            color: Colors.deepOrangeAccent,
            width: 1.0,
          )
          : null,
        ),
        child: isTextOpen
        ? TextField()
        : GestureDetector(
          onTap: () {
            setState(() {
              isTextOpen = true;
              whichToShow = 1; // this is new
            });
          },
          child: Text(
            "User_002",
          ),
        ),
      ),
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Visibility(
          visible: whichToShow == 2 || whichToShow == 0, // this is new
          child: AnimatedContainer(
            duration: Duration(milliseconds: 200),
            width: kaandeneme ? 166 : 45,
            height: 30,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(3)),
              border: Border.all(color: Colors.deepOrangeAccent),
            ),
            child: kaandeneme
            ? TextField()
            : GestureDetector(
              onTap: () {
                setState(() {
                  kaandeneme = true;
                  whichToShow = 2; // this is new
                });
              },
              child: Text(
                "27",
              ),
            ),
          ),
        ),
      ],
    ),
  ],
),

单击其他元素时触发可见性窗口小部件抖动

1 个答案: