Flutter-允许用户输入主题标签 [英] Flutter - allow user enter hashtags

问题描述

Hello Flutter新手在这里！我想让我的用户输入一些链接到该条目的主题标签，这些标签将进入Firestore.

Hello Flutter newbie here! I want to let my users enter some hashtags linked to the entry, which will go into Firestore.

对于主题标签，我将其设置为列表，但是我不确定如何让用户创建主题标签?基本上像SO中的标签字段之类的问题.在Firestore上，我已将该字段设置为接收数据的数组.

For the hashtag, I set it as a List but I'm not sure how to let user create the hashtags? Basically something like the tags field in SO's ask a question. On Firestore I have set the field to be an array to receive the data.

我找不到太多关于在flutter上创建主题标签的文档.任何帮助，将不胜感激！！:)预先感谢！

I can't find much documentation on creating hashtag on flutter. Any help would be appreciated!! :) Thanks in advance!

推荐答案

在我使用dartpad进行创建时，我使用了ListView提出了建议.您可以用自己的建议视图(例如AutoCompleteTextView或其他视图)代替.

Being I used dartpad to create this, I used ListView for suggestions. You may replace with your own suggestions view like AutoCompleteTextView or something else...

List<String> list = ['Java', 'Flutter', 'Kotlin', 'Swift', 'Objective-C'],
      selected = [];
  TextEditingController tc;

  @override
  void initState() {
    super.initState();
    tc = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('Search Tags'),
        backgroundColor: Colors.green[800],
      ),
      body: Column(
//         mainAxisSize:MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                  controller: tc,
                  decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      contentPadding: EdgeInsets.fromLTRB(20, 0, 20, 0),
                      prefixIcon: selected.length < 1
                          ? null
                          : Padding(
                            padding: const EdgeInsets.only(left:10, right:10),
                            child: Wrap(
                                spacing: 5,
                                runSpacing: 5,
                                children: selected.map((s) {
                                  return Chip(
                                      backgroundColor: Colors.blue[100],
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(7),
                                      ),
                                      label: Text(s,
                                          style:
                                              TextStyle(color: Colors.blue[900])),
                                      onDeleted: () {
                                        setState(() {
                                          selected.remove(s);
                                        });
                                      });
                                }).toList()),
                          ))),
            ),
            SizedBox(height: 20),
            ListView.builder(
                shrinkWrap: true,
                itemCount: list.length,
                itemBuilder: (c, i) {
                  return list[i].toLowerCase().contains(tc.text.toLowerCase())
                      ? ListTile(
                          title: Text(list[i],
                              style: TextStyle(color: Colors.blue[900])),
                          onTap: () {
                            setState(() {
                              if (!selected.contains(list[i]))
                                selected.add(list[i]);
                            });
                          })
                      : null;
                })
          ]),
    );
  }

这篇关于Flutter-允许用户输入主题标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！