Flutter：将下拉按钮转换为 Listview.builder答案

【问题标题】：Flutter: Convert Dropdown button to Listview.builderFlutter：将下拉按钮转换为 Listview.builder
【发布时间】：2021-02-15 16:58:43
【问题描述】：

I have got a Dropdown Button that shows app languages when pressed, and when anyone is selected the app language is changed.现在我需要将此下拉按钮转换为列表视图。 builder 以便语言显示为列表而不是下拉列表，但无法做到这一点。如果有人可以提供帮助，我将不胜感激。

这是我的代码：

语言类

class Language {
  final int id;
  final String flag;
  final String name;
  final String languageCode;

  Language(this.id, this.flag, this.name, this.languageCode);

  static List<Language> languageList() {
    return <Language>[
      Language(1, "????????", "English", "en"),
      Language(2, "????????", "français", "fr"),
    ];
  }
}

下拉按钮

DropdownButton<Language>(
  underline: SizedBox(),
  icon: Icon(
  Icons.language,
  color: Colors.blue,
),
onChanged: (Language language) {
  _changeLanguage(language);
},
items: Language.languageList().map<DropdownMenuItem<Language>>(
  (e) => DropdownMenuItem<Language>(
     value: e,
     child: Row(
     mainAxisAlignment: MainAxisAlignment.spaceAround,
     children: <Widget>[
     Text(
     e.flag,
     style: TextStyle(fontSize: 30),
   ),
  Text(e.name)
  ],),
 ),
).toList(),
),

【问题讨论】：

什么不起作用？显示您的 ListView.builder 实现。

标签： flutter listview dart dropdown

【解决方案1】：

这应该可以满足您的需要。

ListView.builder(
        shrinkWrap: true,
        itemCount: Language.languageList().length,
        itemBuilder: (context, index) {
Language language = Language.languageList()[index];
          return GestureDetector(
onTap:(){
_changeLanguage(language)
},
child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: <Widget>[
                            Text(
                              e.flag,
                              style: TextStyle(fontSize: 30),
                            ),
                            Text(e.name)
                          ],
                        )
);
        },
      )

【讨论】：

【解决方案2】：

我同意@Tirth 的观点，不清楚究竟是什么不起作用。但是，您在此处提供的是一个可重复使用的 ListView.builder，它将显示您的语言。

class LanguageList extends StatelessWidget {
  final List<Language> languageList;

  const LanguageList({Key key, this.languageList}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ListView.builder(
        itemCount: languageList.length,
        itemBuilder: (context, index) {
          return Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(languageList[index].id.toString()),
              Text(languageList[index].name),
              Text(languageList[index].flag),
              Text(languageList[index].languageCode),
            ],
          );
        },
      ),
    );
  }
}

然后你可以把它放在你的 UI 中任何你需要的地方

LanguageList(languageList: Language.languageList())

【讨论】：