1

我想在幕后实现不同的值，例如，如果用户在幕后选择“美国”，我只想要一个值“美国”。我怎样才能做到这一点？

这是我的按钮：

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;
                          });
                        },
                      ),
4

1 回答 1

2

您可以做的是创建一个CountryOption带有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'),
      ];
}

如果有不清楚的地方或有任何问题，请告诉我。

于 2020-05-30T10:45:53.783 回答