作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建的应用程序有评论和帖子,我想知道如何在类似于 Instagram 的评论和帖子中实现标记?我认为我上次检查时没有任何软件包。我会像评论和帖子标记中的搜索栏一样实现它吗?但是我不能为此使用搜索代理,因为它会将我带到另一个屏幕,即搜索屏幕,我希望它类似于 Facebook 和 Instagram 的搜索。有任何想法吗?
最佳答案
根据您的要求修改它!
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 !')
));
}
关于flutter - 如何在flutter中实现用户标记?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57403145/
我是一名优秀的程序员,十分优秀!