Question

我正在制作一个调查表应用程序，其中用户必须对每个问题给出答案。

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

第二季度，请选择您的汽车型号

宝马（收音机）

奥迪（收音机）

其他（广播）

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

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方法）有关抖动中可见性的更多信息：https://api.flutter.dev/flutter/widgets/Visibility-class.html

Flutter：通过另一个小部件中的键隐藏/显示一个小部件

1 个答案: