所選項目未顯示在 Flutter 的 DropdownButton 中

Question

我需要你的幫助。 我正在制作一個DropdownButton並且面臨以下問題 - 我看不到在DropdownMenuItems中選擇的項目。 我不明白什么問題沒有顯示。 我正在使用 [getwidget][1] 包，它是一個GFCheckboxListTile小部件——它只是添加了一個復選框。 請告訴我如何解決此錯誤？

落下

import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:getwidget/getwidget.dart';
import 'package:joyn/constants/constants.dart' as constants;

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[1]);
    }
  }

  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: DropdownButton(
          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: GFCheckboxListTile(
                  value: _selectedTitles.contains(widget.items[index]),
                  onChanged: (bool selected) {
                    _onItemSelect(selected, index);
                  },
                  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: Colors.red,
                  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,
          itemHeight: 66,
          selectedItemBuilder: (context) {
            return _selectedTitles.map(
              (item) {
                return Row(
                  children: [
                    widget.icon ?? const SizedBox(),
                    const SizedBox(width: 8),
                    Text(
                      item,
                      style: constants.Styles.bigBookTextStyleWhite,
                    ),
                  ],
                );
              },
            ).toList();
          },
        ),
      ),
    );
  }
}

Answer 1

雖然 UI 需要在DropdownMenuItem上更新，但您可以使用StatefulBuilder包裝GFCheckboxListTile 。

child: Container(
  child: StatefulBuilder(
    builder: (context, setStateSB) => GFCheckboxListTile(
      value: _selectedTitles.contains(widget.items[index]),
      onChanged: (bool selected) {
        _onItemSelect(selected, index);
        setStateSB(() {}); /// we are using StatefulBuilder's setState

       ///add your logic then 
  setState(() {
    selectedValue = widget.items[index];
  });
      },

DropdownMenuItem ontap 在GFCheckboxListTile ，因此onChanged沒有調用。 我正在使用GFCheckboxListTile中的onChanged來更新selectedValue 。