是否可以基于复选框在 Flutter 中显示/隐藏文本表单字段

Question

我正在尝试使用复选框在 Flutter 中显示/隐藏 2 个文本表单字段。我尝试了下面的代码，认为它会使用复选框的状态来显示字段。但这不起作用。

Checkbox 本身确实在 true 和 false 之间切换，但布局没有变化。

CheckboxListTile(
                              title: Text("Do you want to update your price?"),

                      controlAffinity: ListTileControlAffinity.leading,
                          value: priceupdate_value,
                          onChanged: (bool priceupdateValue) {
                            setState(() {


                              priceupdate_value = priceupdateValue;

                            });
                            if(priceupdate_value == true){

                              Column(
                                children: <Widget>[
                                  TextFormField(
                                    decoration: InputDecoration(
                                      labelText: 'New Price',
                                    ),

                                  ),
                                  TextFormField(
                                    decoration: InputDecoration(
                                      labelText: 'Update Other Information',
                                    ),

                                  ),

                                ],
                              );

                            }

                          },

                    ),

Answer 1

用可见性小部件包装它：

Visibility(
    visible: priceupdate_value,
    child: TextFormField(...),
)

你必须在 onPressed 方法之外创建你的列小部件（比如用列小部件包装你的 CheckBoxTileListWidget，然后在孩子下添加你的 CheckBoxTileList 和你的 TextInputField）

就像是

Column(
    children: <Widget>[
        Visibility(
            visible: priceupdate_value,
            child: TextFormField(
                decoration: InputDecoration(
                    labelText: 'Update Other Information',
                ),
            ),
        ), 
        CheckBoxTileList(
            title: Text("Do you want to update your price?"),
            controlAffinity: ListTileControlAffinity.leading,
            value: priceupdate_value,
            onChanged: (bool priceupdateValue) {
                setState(() {
                    priceupdate_value = priceupdateValue;
                });
            },
        ),
    ],
),

Answer 2

我做了一些小改动，就ok了。我希望它适合你。

Column(
    children: <Widget>[
      if (priceupdate_value)
        Column(
          children: <Widget>[
            TextFormField(
              decoration: InputDecoration(
                labelText: 'New Price',
              ),
            ),
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Update Other Information',
              ),
            ),
          ],
        ),
      CheckboxListTile(
        title: Text("Do you want to update your price?"),
        controlAffinity: ListTileControlAffinity.leading,
        value: priceupdate_value,
        onChanged: (bool priceupdateValue) {
          setState(() {
            priceupdate_value = priceupdateValue;
          });
        },
      ),
    ],
  ),

您可以将此处的代码复制粘贴到 dartpad.dev 并立即检查：https://gist.github.com/malibayram91/0ba5c3c5fbdb89f9c2a6a4ec3333d070