[英]How to hide / show widget onclick on other widget in Flutter?
我有这个:同一页面上有两个小部件:
_buildMyWidget() {
return Visibility(
visible: true,
child: Container(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 20.0, right: 5.0),
width: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
),
],
),
),
);
}
所以,当我点击下面的Text.rich
“点击我”按钮时,我想要改变visible: true
为visible: false
。 我怎样才能做到这一点?
_buildMyWidget2() {
return Container(
width: double.infinity,
margin: EdgeInsets.all(20),
padding: EdgeInsets.symmetric(
horizontal: 20,
vertical: 15,
),
child: Text.rich(
TextSpan(
style: TextStyle(color: Colors.white),
children: [
TextSpan(text: "Pf"),
TextSpan(
text: "Click me",
style: TextStyle(
fontSize: 20,
),
),
],
),
),
);
}
尝试这个:
首先定义:
bool isVisibel = false;
然后:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Visibility(
visible: isVisibel,
child: Container(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 20.0, right: 5.0),
width: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
),
],
),
),
),
Container(
width: double.infinity,
margin: EdgeInsets.all(20),
padding: EdgeInsets.symmetric(
horizontal: 20,
vertical: 15,
),
child: Text.rich(
TextSpan(
style: TextStyle(color: Colors.white),
children: [
TextSpan(text: "Pf"),
TextSpan(
text: "Click me",
style: TextStyle(
fontSize: 20,
),
recognizer: TapGestureRecognizer()
..onTap = () {
setState(() {
isVisibel = !isVisibel;
});
}),
],
),
),
),
],
)
isVisibel
为假时的结果:
isVisibel
为真时的结果:
假设这两个小部件在同一个小部件/页面内; 您可以定义 boolean 数据并将其分配给可见性。 点击时,只需切换 boolean 数据
bool show = true; TextSpan( text: ' Click here', style: TextStyle(color: Colors.blue[300]), recognizer: LongPressGestureRecognizer()..onTap = () { setState({ show =;show; }), }, ): Visibility( visible, show: child: Container( height, 100: child: ListView( scrollDirection. Axis,horizontal: children: <Widget>[ Container( margin. const EdgeInsets:only(left. 20,0: right. 5,0): width, 120: decoration: BoxDecoration( borderRadius. BorderRadius,circular(20), ), ), ], ), ); ); }
只需创建一个变量并更改其值。
bool visi = true;
return Visibility(
visible: visi,
child: Container(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 20.0, right: 5.0),
width: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
),
],
),
),
);
并在用户单击 RichText 时更改其值。
return GestureDetector(
onTap:(){
visi = !visi;
setState(){}
}
child: Container(
width: double.infinity,
margin: EdgeInsets.all(20),
padding: EdgeInsets.symmetric(
horizontal: 20,
vertical: 15,
),
child: Text.rich(
TextSpan(
style: TextStyle(color: Colors.white),
children: [
TextSpan(text: "Pf"),
TextSpan(
text: "Click me",
style: TextStyle(
fontSize: 20,
),
),
],
),
),
)
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.