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

Question

我有一个下拉按钮，按下时会显示应用程序语言，而当任何人被选中时，应用程序语言都会更改。现在我需要将这个下拉按钮转换为列表视图。生成器，以便将语言显示为列表而不是下拉列表，但无法做到这一点。如果有人能提供帮助，我将不胜感激。

这是我的代码：

语言class

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(),
),

Answer 1

我同意@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())

Answer 2

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

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

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

Flutter: Convert Dropdown button to Listview.builder

listview

dart

dropdown

flutter