flutter - 如何在flutter中实现用户标记？

Question

我正在构建的应用程序有评论和帖子，我想知道如何在类似于 Instagram 的评论和帖子中实现标记？我认为我上次检查时没有任何软件包。我会像评论和帖子标记中的搜索栏一样实现它吗？但是我不能为此使用搜索代理，因为它会将我带到另一个屏幕，即搜索屏幕，我希望它类似于 Facebook 和 Instagram 的搜索。有任何想法吗？

标签： flutterdarttagging

Answer 1

根据您的要求修改它！

TextEditingController ctrl;
  List<String> users = ['Naveen', 'Ram', 'Satish', 'Some Other'], 
  words = [];
  String str = '';
  List<String> coments=[];

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

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        padding: EdgeInsets.all(20),
        child: Column(mainAxisSize: MainAxisSize.min, children: [
          TextField(
              controller: ctrl,
              decoration: InputDecoration(
                hintText: 'Comment',
                hintStyle: TextStyle(color: Colors.black),
                suffixIcon: IconButton(
                    icon: Icon(Icons.send, color: Colors.blue),
                    onPressed: () {
                      if(ctrl.text.isNotEmpty)
                        setState((){
                          coments.add(ctrl.text);
                        });
                    }),
              ),
              style: TextStyle(
                color: Colors.black,
              ),
              onChanged: (val) {
                setState(() {
                  words = val.split(' ');
                  str = words.length > 0 &&
                          words[words.length - 1].startsWith('@')
                      ? words[words.length - 1]
                      : '';
                });
              }),
          str.length > 1
              ? ListView(
                  shrinkWrap: true,
                  children: users.map((s){
                    if(('@' + s).contains(str))
                    return 
                      ListTile(
                      title:Text(s,style: TextStyle(color: Colors.black),),
                    onTap:(){
                      String tmp = str.substring(1,str.length);
                      setState((){
                        str ='';
                        ctrl.text += s.substring(s.indexOf(tmp)+tmp.length,s.length).replaceAll(' ','_');
                      });
                    });
                    else return SizedBox();
                  }).toList()
              ):SizedBox(),
          SizedBox(height:25),
          coments.length>0 ?
          ListView.builder(
            shrinkWrap:true,
          itemCount:coments.length,
          itemBuilder:(con,ind){
          return Text.rich(
            TextSpan(
            text:'',
            children:coments[ind].split(' ').map((w){
              return w.startsWith('@')&&w.length>1 ?
                TextSpan(
              text:' '+w,
                style: TextStyle(color: Colors.blue),
                recognizer:new TapGestureRecognizer()..onTap=()=>showProfile(w),
              ): TextSpan(text:' '+w,style: TextStyle(color: Colors.black));
            }).toList()
            ),
          );
            },
            ):SizedBox()
        ]));
  }
  showProfile(String s){
    showDialog(
    context:context,
    builder:(con)=>
    AlertDialog(
    title:Text('Profile of $s'),
    content:Text('Show the user profile !')
    ));
  }