我想在 flutter 中创建一个自定义 DropdownButton，它可以与不同的列表 [Flutter] 重复使用

Question

这里我有四个列表，如下面的代码所示，是否可以通过参数 od 以任何其他方式调用列表以实现可重用目的，例如，如果我有四个 DropDown Button 并且每个 DropDown Button 包含不同的列表，那么我如何可以创建一个可重用的代码来实现这个。

这是我试过的，

import 'package:flutter/material.dart';

class CustomDropDown extends StatefulWidget {
  final String HintName;
  final List<String> MDPT;

  CustomDropDown({required this.HintName, required this.MDPT});
  @override
  _CustomDropDownState createState() => _CustomDropDownState();
}

class _CustomDropDownState extends State<CustomDropDown> {
  String? dropdownvalue;
  var MDPackageType = [
    'Package Type 1',
    'Package Type 2',
    'Package Type 3',
    'Package Type 4',
  ];
  var MDPackageName = [
    'Package Name 1',
    'Package Name 2',
    'Package Name 3',
    'Package Name 4',
  ];

  var PTPackageType = [
    'Package Type 1',
    'Package Type 2',
    'Package Type 3',
    'Package Type 4',
  ];
  var PTPackageName = [
    'Package Type 1',
    'Package Type 2',
    'Package Type 3',
    'Package Type 4',
  ];

  @override
  Widget build(BuildContext context) {
    return FormField<String>(
      builder: (FormFieldState<String> state) {
        return InputDecorator(
          decoration: InputDecoration(
            // labelStyle: textStyle,

            // errorStyle: TextStyle(color: Colors.redAccent, fontSize: 16.0),
            hintText: 'Package Type',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(5.0),
            ),
          ),
          isEmpty: dropdownvalue == '',
          child: DropdownButtonHideUnderline(
            child: DropdownButton<String>(
              hint: Text(
                widget.HintName,
                style: TextStyle(color: Colors.blue),
              ),
              value: dropdownvalue,
              isDense: true,
              onChanged: (String? newValue) {
                setState(() {
                  dropdownvalue = newValue;
                  state.didChange(newValue);
                });
              },

              
              items: MDPT.map((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(
                    value,
                    style: TextStyle(color: Colors.blue),
                  ),
                );
              }).toList(),
            ),
          ),
        );
      },
    );
  }

Answer 1

使用以下函数使用 List.

构建 DropdownMenuItem 列表

List<DropdownMenuItem> buildDropdownMenuItems(List list){
      List<DropdownMenuItem> dropDownItems = [];
      list.forEach((value) {
        dropDownItems.add(
            DropdownMenuItem<String>(
              value: value,
              child: Text(
                value,
                style: TextStyle(color: Colors.blue),
              ),
            )
        );
      });
      
      return dropDownItems;
    }

使用items: buildDropdownMenuItems(MDPT) 属性调用函数。

所以完整代码如下。

import 'package:flutter/material.dart';

class CustomDropDown extends StatefulWidget {
  final String hintName;
  final List<String> MDPT;

  CustomDropDown({required this.hintName, required this.MDPT});
  @override
  _CustomDropDownState createState() => _CustomDropDownState();
}

class _CustomDropDownState extends State<CustomDropDown> {
  String? dropdownvalue;

  List<DropdownMenuItem<String>> buildDropdownMenuItems(List list){
    List<DropdownMenuItem<String>> dropDownItems = [];
    list.forEach((value) {
      dropDownItems.add(
          DropdownMenuItem<String>(
            value: value,
            child: Text(
              value,
              style: TextStyle(color: Colors.blue),
            ),
          )
      );
    });

    return dropDownItems;
  }

  @override
  Widget build(BuildContext context) {
    return FormField<String>(
      builder: (FormFieldState<String> state) {
        return InputDecorator(
          decoration: InputDecoration(
            hintText: widget.hintName,
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(5.0),
            ),
          ),
          isEmpty: dropdownvalue == '',
          child: DropdownButtonHideUnderline(
            child: DropdownButton<String>(
              hint: Text(
                widget.hintName,
                style: TextStyle(color: Colors.blue),
              ),
              value: dropdownvalue,
              isDense: true,
              onChanged: (String? newValue) {
                setState(() {
                  dropdownvalue = newValue;
                });
              },

              //call buildDropdownMenuItems() here and pass the list of Strings as attribue
              items: buildDropdownMenuItems(widget.MDPT),
            ),
          ),
        );
      },
    );
  }
}

我想在 flutter 中创建一个自定义 DropdownButton，它可以与不同的列表 [Flutter] 重复使用

I want to create a custom DropdownButton in flutter which can be reusable with different List [Flutter]

flutter

dart

flutter-dropdownbutton