在 DropdownButton 中選擇的元素在按鈕中不顯示

Question

大佬們請告訴我如何解決這個問題。 我正在使用帶有Checkboxlisttile的DropdownButton並遇到一個問題，即在選擇項目時，所選項目未顯示在按鈕本身的 DropdownButto 中，不在列表中（我在下面附上了截圖），我做錯了什么並理解需要修復什么以顯示所選項目？ 我使用包作為樣式：[getwidget][1] 和 [dropdown_button2][2]

代碼

 class DropdownWidget extends StatefulWidget {
  List<String> items;
  SvgPicture? icon;
  double width;

  DropdownWidget({
    Key? key,
    required this.items,
    required this.icon,
    required this.width,
  }) : super(key: key);

  @override
  State<DropdownWidget> createState() => _DropdownWidgetState();
}

class _DropdownWidgetState extends State<DropdownWidget> {
  String? selectedValue;
  bool selected = false;

  final List _selectedTitles = [];
  final List _selectedTitlesIndex = [];

  final GFCheckboxType type = GFCheckboxType.basic;

  @override
  void initState() {
    super.initState();
    if (widget.items.isNotEmpty) {
      _selectedTitles.add(widget.items[3]);
    }
  }

  void _onItemSelect(bool selected, int index) {
    if (selected == true) {
      setState(() {
        _selectedTitles.add(widget.items[index]);
        _selectedTitlesIndex.add(index);
      });
    } else {
      setState(() {
        _selectedTitles.remove(widget.items[index]);
        _selectedTitlesIndex.remove(index);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.width,
      child: DropdownButtonHideUnderline(
        child: DropdownButton2(
          items: List.generate(
            widget.items.length,
            (index) => DropdownMenuItem<String>(
              value: widget.items[index],
              child: Container(
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      color: constants.Colors.white.withOpacity(0.1),
                      width: 1,
                    ),
                  ),
                ),
                child: StatefulBuilder(
                  builder: (context, setStateSB) => GFCheckboxListTile(
                    value: _selectedTitles.contains(widget.items[index]),
                    onChanged: (bool selected) {
                      _onItemSelect(selected, index);
                      setStateSB(() {});
                    },
                    selected: selected,
                    title: Text(
                      widget.items[index],
                      style: constants.Styles.smallTextStyleWhite,
                    ),
                    padding: const EdgeInsets.only(top: 14, bottom: 13),
                    margin: const EdgeInsets.only(right: 12, left: 2),
                    size: 22,
                    activeBgColor: constants.Colors.greyCheckbox,
                    activeBorderColor: constants.Colors.greyCheckbox,
                    inactiveBgColor: constants.Colors.greyCheckbox,
                    activeIcon: SvgPicture.asset(constants.Assets.checkboxIcon),
                    inactiveBorderColor: constants.Colors.greyXMiddle,
                    type: type,
                  ),
                ),
              ),
            ),
          ),
          value: selectedValue,
          onChanged: (value) {
            setState(() {
              selectedValue = value as String;
            });
          },
          icon: SvgPicture.asset(constants.Assets.arrowDropdown),
          iconSize: 21,
          buttonHeight: 27,
          itemHeight: 66,
          dropdownMaxHeight: 191,
          dropdownWidth: 140,
          dropdownDecoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            border: Border.all(
              color: constants.Colors.purpleMain,
            ),
            color: constants.Colors.greyDark,
          ),
          selectedItemBuilder: (context) {
            return _selectedTitles.map(
              (item) {
                return Row(
                  children: [
                    widget.icon ?? const SizedBox(),
                    const SizedBox(width: 8),
                    Text(
                      item,
                      style: constants.Styles.bigBookTextStyleWhite,
                    ),
                  ],
                );
              },
            ).toList();
          },
        ),
      ),
    );
  }
}

列表

 final List<String> carList = const [
    "All EV's",
    'Main EV',
    '<EV2>',
  ];

Answer 1

當您使用 Dropdown 小部件作為解決方法時，我為您准備了一個真正的解決方案，可以完全滿足您的需求：

return Container(
  width: 150,
  child: PopupMenuButton(
    offset: Offset(0, 50),
    child: Padding(
      padding: EdgeInsets.symmetric(
        horizontal: 10, 
        vertical: 20
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          if (_selectedTitles.isNotEmpty)
          Text("<"),
          Flexible(
            child: Text(
              _selectedTitles.isEmpty
              ? "Select a value"
              : _selectedTitles.map((item) => item).toList().join(", "),
              overflow: TextOverflow.ellipsis,
            ),
          ),

          if (_selectedTitles.isNotEmpty)
          Text(">"),

          SizedBox(width: 5),
          Icon(Icons.arrow_drop_down)
        ],
      ),
    ),
    itemBuilder: (context) => List.generate(
      widget.items.length,
      (index) => PopupMenuItem(
        value: widget.items[index],
        child: Container(
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                // color: constants.Colors.white.withOpacity(0.1),
                width: 1,
              ),
            ),
          ),
          child: StatefulBuilder(
            builder: (context, setStateSB) => CheckboxListTile(
              value: _selectedTitles.contains(widget.items[index]),
              onChanged: (bool? selected) {
                _onItemSelect(selected!, index);
                setStateSB(() {});
              },
              selected: selected,
              title: Text(
                widget.items[index],
              ),
            ),
          ),
        ),
      ),
    )
  ),
);

在這里，我添加了另一個示例，說明如何在彈出窗口中包含 2 個按鈕，允許您選擇所有值或取消選擇它們：

      String? selectedValue;
    
      final List<String> _selectedTitles = [];
      final List<int> _selectedTitlesIndex = [];
    
      // final GFCheckboxType type = GFCheckboxType.basic;
    
      @override
      void initState() {
        super.initState();
        // if (widget.items.isNotEmpty) {
        //   _selectedTitles.add(widget.items[0]);
        // }
      }
    
      void _onItemSelect(bool selected, int index) {
        setState(() {
        if (selected == true) {
          _selectedTitles.add(widget.items[index]);
          _selectedTitlesIndex.add(index);
        } else {
          _selectedTitles.remove(widget.items[index]);
          _selectedTitlesIndex.remove(index);
        }
        });
      }
    
      void _selectAll(bool selected) {
        setState(() {
          if (selected == true) {
            _selectedTitles.clear();
            _selectedTitles.addAll(widget.items);
            _selectedTitlesIndex.clear();
            for( int i = 0 ; i <= widget.items.length; i++ ) { 
              _selectedTitlesIndex.add(i); 
            }
          } else {
            _selectedTitles.clear();
            _selectedTitlesIndex.clear();
          }
          Navigator.of(context).pop();
        });
      }
    
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150,
      child: PopupMenuButton(
        offset: Offset(0, 50),
        child: Padding(
          padding: EdgeInsets.symmetric(
            horizontal: 0, 
            vertical: 20
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              if (_selectedTitles.isNotEmpty)
              Text("<"),
              Flexible(
                child: Text(
                  _selectedTitles.isEmpty
                  ? "Select a value"
                  : _selectedTitles.map((item) => item).toList().join(", "),
                  overflow: TextOverflow.ellipsis,
                ),
              ),

              if (_selectedTitles.isNotEmpty)
              Text(">"),

              SizedBox(width: 5),
              Icon(Icons.arrow_drop_down)
            ],
          ),
        ),


        itemBuilder: (context) {
          List<PopupMenuEntry> items1 = List.generate(
            widget.items.length,
            (index) => PopupMenuItem(
              padding: EdgeInsets.zero,
              value: widget.items[index],
              child: Container(
                decoration: BoxDecoration(
                  border: Border(
                    bottom: index == widget.items.length - 1
                    ? BorderSide.none
                    : BorderSide(
                      // color: constants.Colors.white.withOpacity(0.1),
                      width: 1,
                    ),
                  ),
                ),
                child: StatefulBuilder(
                  builder: (context, setStateSB) => CheckboxListTile(
                    value: _selectedTitles.contains(widget.items[index]),
                    onChanged: (bool? selected) {
                      _onItemSelect(selected!, index);
                      setStateSB(() {});
                    },
                    selected: false,
                    title: Text(
                      widget.items[index],
                    ),
                  ),
                ),
              ),
            ),
          );
          return [
            PopupMenuItem(
              value: "select all",
              padding: EdgeInsets.zero,
              child: Container(
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      // color: constants.Colors.white.withOpacity(0.1),
                      width: 1,
                    ),
                  ),
                ),
                child: Row(
                  children: [
                    TextButton(
                      child: Text(
                        "Select all",
                      ),
                      onPressed: () {
                        _selectAll(true);
                      },
                    ),
                    Spacer(),
                    TextButton(
                      child: Text(
                        "Unselect all",
                      ),
                      onPressed: () {
                        _selectAll(false);
                      },
                    )
                  ],
                ),
              ),
            ),
            ...items1
          ];
        }
      ),
    );
  }

Answer 2

嘗試這個

import 'package:flutter/material.dart';


class DropdownWidget extends StatefulWidget {

List<String> items;

DropdownWidget({
Key? key,
required this.items,
}) : super(key: key);

@override
State<DropdownWidget> createState() => _DropdownWidgetState();
 }

class _DropdownWidgetState extends State<DropdownWidget> {
 String? selectedValue;
 bool selected = false;

 int selectedInd = 0 ;

final List _selectedTitles = [];
final List _selectedTitlesIndex = [];

@override
void initState() {
super.initState();
if (widget.items.isNotEmpty) {
  _selectedTitles.add(widget.items[0]);
}else{
  print("null");
  }
 }

 void _onItemSelect(bool selected, int index) {
 if (selected == true) {
  setState(() {
    _selectedTitles.add(widget.items[index]);
    _selectedTitlesIndex.add(index);
  });
  } else {
  setState(() {
    selectedInd = index ;
    _selectedTitles.remove(widget.items[index]);
    _selectedTitlesIndex.remove(index);
  });
   }
   }

  @override
  Widget build(BuildContext context) {
  return SizedBox(
      width: 150,
    child: DropdownButtonHideUnderline(
      child: DropdownButton(
        hint : Center(child: Text(_selectedTitles.isEmpty ? "selectedEV" 
        : _selectedTitles[selectedInd] , textAlign: TextAlign.end,)) ,
        items: List.generate(
          widget.items.length,
          (index) => DropdownMenuItem<String>(
            value: widget.items[index],
            child: Container(
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    color: Colors.white.withOpacity(0.1),
                    width: 1,
                  ),
                ),
              ),
              child: StatefulBuilder(
                builder: (context, setStateSB) => CheckboxListTile(
                  value: _selectedTitles.contains(widget.items[index]),
                  onChanged: (bool? selected) {
                    _onItemSelect(selected!, index);
                    setStateSB(() {});
                  },
                  selected: selected,
                  title: Text(
                    widget.items[index],
                  ),
                ),
              ),
            ),
          ),
        ),
        value: selectedValue,
        onChanged: (value) {
          setState(() {
            selectedValue = value as String;
            print(value);
          });
        },
        icon: Icon(Icons.arrow_drop_down),
        iconSize: 21,
        itemHeight: 66,
        selectedItemBuilder: (context) {
          return _selectedTitles.map(
            (item) {
              return Row(
                children: [
                  const SizedBox(width: 8),
                  Text(
                    item,
                  ),
                ],
              );
            },
          ).toList();
        },
      ),
    ),

   );
   }
   }