可见性微件颤振在单击其他元素时触发

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",
),
),
),
),
],
),
],
),