所选项目未显示在 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 上更新，但您可以将 GFCheckboxListTile 换成 StatefulBuilder。

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.

所选项目未显示在 Flutter 的 DropdownButton 中

Selected item not showing in DropdownButton in Flutter

dart

flutter