Flutter Dart 显示带有循环的 DropdownButton 选项答案

【问题标题】：Flutter Dart showing DropdownButton options with a loopFlutter Dart 显示带有循环的 DropdownButton 选项
【发布时间】：2019-12-17 01:05:52
【问题描述】：

我正在开发一个颤振应用程序，我想要一个 DropdownButton 以 0.25 的增量显示数字 1-99。到目前为止，我正在手动将它们全部写出来，但是有没有办法创建一个循环来做到这一点？这是我的代码：

DropdownButton<String>(
          items: [
            DropdownMenuItem(
              value: "1",
              child: Text("1"),
            ),
            DropdownMenuItem(
              value: "1.25",
              child: Text("1.25"),
            ),
            DropdownMenuItem(
              value: "1.5",
              child: Text("1.5"),
            ),
            DropdownMenuItem(
              value: "1.75",
              child: Text("1.75"),
            ),
          DropdownMenuItem(
              value: "2",
              child: Text("2"),
            ),
          DropdownMenuItem(
              value: "2.25",
              child: Text("2.25"),
            ),
          DropdownMenuItem(
              value: "2.5",
              child: Text("2.5"),
          ),
          DropdownMenuItem(
            value: "2.75",
            child: Text("2.75"),
          ),
          DropdownMenuItem(
            value: "3",
            child: Text("3"),
          ),
          DropdownMenuItem(
            value: "3.25",
            child: Text("3.25"),
          ),
          DropdownMenuItem(
            value: "3.5",
            child: Text("3.5"),
          ),
          DropdownMenuItem(
            value: "3.75",
            child: Text("3.75"),
          ),
          DropdownMenuItem(
            value: "4",
            child: Text("4"),
          ),
          DropdownMenuItem(
            value: "4.25",
            child: Text("4.25"),
          ),
          DropdownMenuItem(
            value: "4.5",
            child: Text("4.5"),
          ),
          DropdownMenuItem(
            value: "4.75",
            child: Text("4.75"),
          ),
          DropdownMenuItem(
            value: "5",
            child: Text("5"),
          ),
          ],
          onChanged: (value) {
            setState(() {
              _value2 = value;
            });
          },
          //new code
          hint: Text("#"),
          value: _value2,
        ),

我了解循环，但不确定如何执行此操作。

感谢您的帮助。

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以使用 List.generate 生成值列表，然后将其映射到下拉菜单项列表中：

List<String> doubleList = List<String>.generate(393, (int index) => '${index * .25 + 1}');
List<DropdownMenuItem> menuItemList = doubleList.map((val) => DropdownMenuItem(value: val, child: Text(val))).toList();

编辑：这是对我有用的完整小部件

class DropdownList extends StatefulWidget {


 @override
  _DropdownListState createState() => _DropdownListState();
}

class _DropdownListState extends State<DropdownList> {
  String selected;

  @override
  Widget build(BuildContext context) {
    List<String> doubleList =
        List<String>.generate(393, (int index) => '${index * .25 + 1}');
    List<DropdownMenuItem> menuItemList = doubleList
        .map((val) => DropdownMenuItem(value: val, child: Text(val)))
        .toList();

    return DropdownButton(
      value: selected,
      onChanged: (val) => setState(() => selected = val),
      items: menuItemList,
    );
  }
}

【讨论】：

谢谢@Kris！我现在收到以下错误：错误：等式表达式不能是另一个等式表达式的操作数。尝试重写表达式。 List doubleList = List.generate(393, (int index) => index * .25 + 1); ^ lib/PictureScreen.dart:65:24：错误：找不到吸气剂：'doubleList'。 List doubleList = List.generate(393, (int index) => index * .25 + 1)
我正在努力，但我想我会发布，如果你知道如何解决它，请告诉我。谢谢！
我发布的第一个版本可能有错误，我在几分钟前编辑了它，
哦，等一下，我没有看到您的完整编辑，请稍等

【解决方案2】：

这适用于循环下拉菜单

String _dropDownValueInch;


            DropdownButton(             underline: SizedBox(),
                                        hint: _dropDownValueInch == null
                                            ? Text(
                                                '0',
                                                textAlign: TextAlign.center,
                                              )
                                            : Text(
                                                _dropDownValueInch,
                                                style: TextStyle(
                                                    color: Colors.black),
                                              ),
                                        // isExpanded: true,
                                        iconSize: 30.0,
                                        style: TextStyle(color: Colors.black),
                                        items: List<String>.generate(100,
                                            (int index) => '${index + 1}').map(
                                          (val) {
                                            return DropdownMenuItem<String>(
                                              value: val,
                                              child: Text(val),
                                            );
                                          },
                                        ).toList(),
                                        onChanged: (val) {
                                          setState(
                                            () {
                                              _dropDownValueInch = val;
                                            },
                                          );
                                        },
                                      ),
                                      Text("select a number"),

【讨论】：