如何使用 DropdownButton 更新文本？

Question

我想使用 DropdownButton 的结果来更改显示的一些文本，我该如何实现？

我曾尝试使用 textControlEditor，但无法使用 Text。 我希望文本显示 advice 作为文本，它应该基于 value

这是我的下拉按钮：

                          child: Container(
                            width: 300,
                            padding: EdgeInsets.symmetric(vertical: 5, horizontal: 15),
                            decoration: BoxDecoration(
                                border: Border.all(color: Color(0xff202124), width: 3.0),
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(30)),

                            child: DropdownButton<String>(
                              onChanged: (value){
                                setState(() {_selectedColor = value;});
                                if (value == 'basic') advice = 'Have a great day!';
                                else if (value == 'Tired') advice = 'Have a rest today!';
                                else if (value == 'Happy') advice = 'Try to get lots of work done today!';
                                else if (value == 'Sad') advice = 'Take some time for yourself today';
                                else if (value == 'Bored') advice = 'Go on a walk and then get back to working';
                                else if (value == 'Productive') advice = 'Use that productivity';
                                else advice = 'Good luck today!';
                                print(advice);
                                //update text here

                                },
                              value: _selectedColor,
                              underline: Container(),
                              hint: Center(
                                  child: Text('How have you been feeling today?',
                                    style: TextStyle(color: Color(0xffA9A9A9)),)),
                              icon: Icon(
                                Icons.arrow_downward,
                                color: Color(0xffA9A9A9),
                              ),
                              isExpanded: true,
                              items: _emotion
                                  .map((e) => DropdownMenuItem(
                                child: Container(
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    e,
                                    style: TextStyle(fontSize: 18),
                                  ),
                                ),
                                value: e,
                              )).toList(),


                              selectedItemBuilder: (BuildContext context) => _emotion
                                  .map((e) => Center(
                                child: Text(
                                  e,
                                  style: const TextStyle(
                                      fontSize: 18,
                                      color: Color(0xffA9A9A9),
                                      fontStyle: FontStyle.italic,
                                      fontWeight: FontWeight.bold),
                                ),
                              ))
                                  .toList(),
                            ),
                          )),

这里是我想要更改文本的地方：

                        Expanded(
                        child: Container(
                          alignment: Alignment.center,
                          padding: EdgeInsets.all(20),
                          width: 300,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(30.0),
                            color:  Color(color),
                          ),

                          child: Center(
                              child: Text(
                                advice,
                                style: TextStyle(fontFamily: 'Arial', fontSize: 18, color: Colors.white, height: 1,  ),
                                textAlign: TextAlign.center,
                              )
                          ),
                        ),
                      ),

如果需要完整代码，我也很乐意分享，谢谢！

Answer 1

好的，所以在这里你必须创建一个 returns 字符串值的函数。此字符串值将是您通过 drop-down 按钮 select 的值。

这是一个例子：

String getAdvice() {
    if (selectedDropDownValue == 'DefaultValue') {
      return 'Default Text';
    } else {
      return '$selectedDropDownValue';
    }
  }

然后在您希望 selected 建议出现的文本小部件中调用此函数。像这样：

child: Center:
    child: Text(
    getAdvice(), //This is the updated line from your code
    style: TextStyle(fontFamily: 'Arial', fontSize: 18, color: Colors.white, height: 1,  ),
    textAlign: TextAlign.center,
    ),
),

希望这能回答您的问题。随时消除任何困惑。