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

问题描述

如您所见，存在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,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",],

解决方法

首先，您需要使用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,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",],