如何通过单击复选框打开另一个小部件

Question

我想创建这样的逻辑：当复选框为true时，它返回带有Image的小部件，然后为false，图像消失。我试过这个代码：

bool checkBoxValue = true;
Checkbox(
value: checkBoxValue,
onChanged: (bool? value) {
setState(() {
checkBoxValue = value ?? true;
if (value == true) {
Image.network('https://imgd.aeplcdn.com/370x208/n/cw/ec/40432/scorpio-n-exterior-right-front-three-quarter-15.jpeg?isig=0&q=75')
}else if(value == false){
return;}
});

Answer 1

您可以试用以下代码

Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Checkbox(
value: checkBoxValue,
onChanged: (bool value) {
checkBoxValue = value;
setState(() {

});
}),
checkBoxValue
? Image.network(
'https://imgd.aeplcdn.com/370x208/n/cw/ec/40432/scorpio-n-exterior-right-front-three-quarter-15.jpeg?isig=0&q=75')
: Container()
],
)

Answer 2

您可以使用Visibility小部件。

它有一个名为visible的参数，如果visible是true，它会显示小部件。

示例：

Visibility(
visible: checkBoxValue,
child: _theWidgetThatYouWantToShow(), // put your widget here
),

或者，没有Visibility，您可以这样做：

Column(
children: [
CheckBox(...), // your checkbox
if (checkBoxValue)
_theWidgetThatYouWantToShow(), // put your widget here
],
),