Flutter 选择项并以listView格式返回它们

Flutter 选择项并以listView格式返回它们,flutter,Flutter,我实现了一个包含项目列表的搜索栏,当用户键入时,它只显示以该字母开头的单词。我需要用户能够有一个这些项目的多个选择,然后返回到一个不同的容器中 到目前为止,我就是这么做的: class LanguageScreen extends StatefulWidget { @override _LanguageScreenState createState() => _LanguageScreenState(); } class _LanguageScreenState extends

我实现了一个包含项目列表的搜索栏,当用户键入时,它只显示以该字母开头的单词。我需要用户能够有一个这些项目的多个选择,然后返回到一个不同的容器中

到目前为止,我就是这么做的:

class LanguageScreen extends StatefulWidget {
  @override
  _LanguageScreenState createState() => _LanguageScreenState();
}

class _LanguageScreenState extends State<LanguageScreen> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ListSearch(),
    );
  }
}

class ListSearch extends StatefulWidget {
  ListSearchState createState() => ListSearchState();
}

class ListSearchState extends State<ListSearch> {
  TextEditingController _textController = TextEditingController();

  // var selectedLanguage = SelectedLanguage();

  List<Language> languages = <Language>[
    Language(
      1,
      'Spanish',
    ),
    Language(
      2,
      'Italian',
    ),
    Language(
      3,
      'German',
    ),
    Language(
      4,
      'Arab',
    ),
    Language(
      5,
      'Greek',
    ),
    Language(
      6,
      'Thai',
    ),
    Language(
      7,
      'Chinese',
    ),
    Language(
      8,
      'French',
    )
  ];

  List<String> newDataList = List.from(Language);

  onItemChanged(String value) {
    setState(() {
      newDataList = languages.where((string) => string.toLowerCase().contains(value.toLowerCase())).toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(12.0),
            child: TextField(
              textInputAction: TextInputAction.continueAction,
              controller: _textController,
              decoration: InputDecoration(
                icon: Icon(Icons.search),
                hintText: 'Type languages',
              ),
              onChanged: onItemChanged,
            ),
          ),
          Expanded(
            child: ListView(
              padding: EdgeInsets.all(12.0),
              children: newDataList.map((data) {
                return ListTile(
                    title: Text(data),
                    onTap: () {
                      setState(() {
                        Language.selected = !Language.selected;

                        print(Language[index].selected.toString());
                      });
                    });
              }).toList(),
            ),
          )
        ],
      ),
    );
  }
}

class Language {
  final int id;
  final String title;
  bool selected = false;

  Language(this.id, this.title);
}

如果有人能告诉我如何做到这一点,我将不胜感激。

以下是您想要的基本示例:


您可以直接从DartPad运行它。

是否要在下面的容器中添加其他ListView,仅使用所选语言?是的,或者不需要ListView,只需返回所选语言即可。非常感谢您的帮助。我确实收到了以下错误:生成ListSearchdirty时抛出了以下类型的错误,状态:ListSearchState91bfb:type“List”不是“function result”的“List”类型的子类型您是通过运行DartPad得到该错误的吗?