Flutter：从另一个小部件中按键隐藏/显示一个小部件

Question

我正在制作一个问卷应用程序，用户必须在其中回答每个问题。

我的屏幕上有五个问题，我有一个问题是

Q2 请选择您的车型

1. 宝马（收音机）
2. 奥迪（收音机）
3. 其他（无线电）

如果用户点击第三个选项，它应该会显示另一个问题

Q2:1 请输入您的汽车品牌

这个问题最初是隐藏的。只有当用户点击上面的第三个选项 {Textbox} 时才会显示。

如何按键动态显示/隐藏小部件？

我的小部件代码：

 case ("RADIO"): // if answer type is equal to radio (majority of answers are radio)
        var index = listAnswers
            .indexWhere((pair) => pair['key'] == objQuestion.questionId);
        for (Answer ans in objQuestion.answers) {
          // fetching answer index
          var ansIndex = listAnswers[index]['answer']
              .indexWhere((pair) => pair['key'] == ans.answerId);
          answerWidget.add(
              //   StatefulBuilder(
              //   builder: (BuildContext context, StateSetter setState) {
              // return
              Container(
                  child: Padding(
            padding: EdgeInsets.all(10.0),
            child: RadioListTile(
              // key: _key,
              title: Text(ans.answerText),
              value: listAnswers[index]['answer'][ansIndex]['key'],
              groupValue: listAnswers[index]['selectedValue'],
              onChanged: (val) {
                setState(() {
                  listAnswers[index]['answer'].asMap().forEach(
                      (index, keyPair) => keyPair['value'] =
                          false); // making all other answer option selected value to false
                  listAnswers[index]['answer'][ansIndex]['value'] =
                      true; // making current answer option selected value to true
                  listAnswers[index]['selectedValue'] =
                      val; // setting current selected value to selected answer answerId which is key value

                  // if (val == 3)
                  //    widget.show() where key == qid2-1;
                  // else
                  // //    widget.hide() where key == qid2-1;
                });
              },
              secondary: const Icon(Icons.check),
              activeColor: Color.fromRGBO(223, 0, 61, 1),
            ),
          )));
          // }));
        }
        return answerWidget;
        break;

我提出问题的小部件代码。

ListView generateForm() {
    return ListView.builder(
      itemCount: listQuestions.length,
      itemBuilder: (context, index) => Card(
        color: Color.fromRGBO(232, 232, 232, 1),
        elevation: 0,
        child: Padding(
          key: Key(listQuestions[index].questionNo.toString()),
          padding: const EdgeInsets.all(18.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text(
                listQuestions[index].questionNo.toString() +
                    '. ' +
                    listQuestions[index].questionText.toString(),
                style: TextStyle(
                  fontSize: 18.0,
                  fontWeight: FontWeight.normal,
                ),
              ),
              if (listQuestions[index].helpboxes?.isNotEmpty == true)
                FittedBox(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      // have to go inside expansion tile like we are doing for answers
                      FilterChip(
                        backgroundColor: Colors.grey[100],
                        label: Text(
                          listQuestions[index]
                              .helpboxes[0]
                              .helpboxText
                              .substring(1, 60),
                        ),
                        onSelected: (b) {},
                      )
                    ],
                  ),
                ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: getAnswerWidget(listQuestions[index]),
              ),
            ],
          ),
        ),
        //children: getAnswerWidget(form[index]),
      ),
    );
  }

Answer 1

您可以使用 Flutters 可见性类来执行此操作。

bool isVisible;

...

Visibility(
  visible: isVisible,
  child: TextView(
  ...
  ),
),

然后您可以修改第三个单选按钮onChanged 方法将isVisible 设置为true（您可能需要调用notifylisteners 方法，因为对象会发生变化） 有关 Flutter 中可见性的更多信息：https://api.flutter.dev/flutter/widgets/Visibility-class.html