如何在 Flutter 的 DropdownButton 中设置不同的值而不是项目的值？

Question

我想在幕后实现不同的值，例如，如果用户在幕后选择"United State of America"，我只想要一个值"USA"。我怎样才能做到这一点？

这是我的按钮：

DropdownButton<String>(
                        isExpanded: true,
                        underline: SizedBox(),
                        icon: SvgPicture.asset("assets/icons/dropdown.svg"),
                        value: dropdownValue,
                        items: [
                          'Nepal',
                          'India',
                          'United States',
                          'Denmark',
                          'UK',
                          'World Wide'
                        ].map<DropdownMenuItem<String>>((String value) {
                          return DropdownMenuItem<String>(
                            value: value,
                            child: Text(value),
                          );
                        }).toList(),
                        onChanged: (newValue) {
                          setState(() {
                            dropdownValue = newValue;
                          });
                        },
                      ),

Answer 1

你可以做的是创建一个 CountryOption class 和一个 key（在你的例子中是 'USA'）和一个 fullName（'United States' 在你的例子中）。

然后您创建 CountryOption 的下拉列表项而不是 String，因此您可以存储当前选择的 CountryOption 并且您同时拥有 key 和fullName 个可供以后使用的属性。

我还建议只加载一次您的项目列表，而不是在每次重建时加载。

import 'package:flutter/material.dart';

class CountriesButton extends StatefulWidget {
  const CountriesButton({Key key}) : super(key: key);

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

class _CountriesButtonState extends State<CountriesButton> {
  List<DropdownMenuItem<CountryOption>> _countryItems;
  CountryOption _selectedCountry;

  @override
  void initState() {
    // Get all countries
    List<CountryOption> countries = CountryOption.allCountries;

    // Initialise your items only once
    _countryItems = countries.map<DropdownMenuItem<CountryOption>>(
      (CountryOption countryOption) {
        return DropdownMenuItem<CountryOption>(
          value: countryOption,
          child: Text(countryOption.fullName),
        );
      },
    ).toList();

    // Initialiste your dropdown with the first country in the list
    // (might be different in your specific scenario)
    _selectedCountry = countries[0];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: DropdownButton<CountryOption>(
        isExpanded: true,
        underline: SizedBox(),
        icon: SvgPicture.asset("assets/icons/dropdown.svg"),
        value: _selectedCountry,
        items: _countryItems,
        onChanged: (newValue) {
          setState(() {
            _selectedCountry = newValue;
          });
        },
      ),
    );
  }
}

class CountryOption {
  final String key;
  final String fullName;

  CountryOption(this.key, this.fullName);

  static List<CountryOption> get allCountries => [
        CountryOption('nepal', 'Nepal'),
        CountryOption('india', 'India'),
        CountryOption('USA', 'United States'),
        CountryOption('denmark', 'Denmark'),
        CountryOption('uk', 'UK'),
        CountryOption('world', 'World Wide'),
      ];
}

如果有什么不清楚或有任何问题，请告诉我。

如何在 Flutter 的 DropdownButton 中设置不同的值而不是项目的值？

How to set different value instead of items's value in DropdownButton in flutter?

flutter

flutter-layout

dropdownbutton