如果我想搜索厨房,如果厨房是在第9索引,当它被搜索时,它的名称将在第一索引,但图像保持相同的第一索引(第一个索引=茶)和文本更新到厨房,但当我点击厨房它给予茶的细节如何解决它根据我的代码.简而言之,在搜索栏中的文本更新正确,但是屏幕上显示的一张图片的url和产品详细信息没有相应更新。请解决我的问题。
我的文本字段
TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.search,
controller: searchcontroller,
focusNode: fousnode,
onChanged: (query) {
setState(() {
FirebaseFirestore.instance
.collectionGroup("Add_product")
.where("product_name", isGreaterThanOrEqualTo: query)
.where("product_name", isLessThan: query + 'z')
.snapshots();
});
},
decoration: InputDecoration(
hintText: "Search Product",
suffixIcon: widget.enableFocusMode? IconButton(
icon: Icon(Icons.clear),
onPressed: () {
searchcontroller.clear();
},
)
: null,
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(11)),
),
),
)
检索数据
StreamBuilder(
stream:
FirebaseFirestore.instance.collectionGroup("Add_product").snapshots(),
builder: (BuildContext context,
AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) {
return Center(
child: LoadingAnimationWidget.staggeredDotsWave(
color: Colors.red, size: 10));
}
List<QueryDocumentSnapshot> data = snapshot.data!.docs;
if (searchcontroller.text.isNotEmpty) {
data = data.where((doc) => doc["product_name"]
.toLowerCase()
.contains(searchcontroller.text.toLowerCase()))
.toList();
}
应用程序的UI
GridView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
childAspectRatio: 9.0,
mainAxisSpacing: 8.0,
crossAxisSpacing: 2.0,
),
itemCount:data.length,
itemBuilder: (itemBuilder, index) {
final product = data[index]["product_name"];
final searchValue = searchcontroller.text.toLowerCase();
final searchIndex = product.toLowerCase().indexOf(searchValue);
final searchLength = searchValue.length;
return Container(
child: InkWell(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (builder)=>detail(
url: snapshot.data!.docs[index]["url"],
productName: snapshot.data!.docs[index]["product_name"],
productPrice: snapshot.data!.docs[index]["product_price"],
)));
final user = FirebaseAuth.instance.currentUser;
if (user != null) {
FirebaseFirestore.instance.collection('search_history').add({
'searchTerm': snapshot.data!.docs[index]["product_name"],
'userId': user.uid,
'timestamp': Timestamp.now(),
});
}
},
child: ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(
snapshot.data!.docs[index]["url"]
),
),
title: RichText(
text: TextSpan(
text: product.substring(0, searchIndex),
style: TextStyle(color: Colors.black),
children: [
TextSpan(
text: product.substring(searchIndex, searchIndex + searchLength),
style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
),
TextSpan(
text: product.substring(searchIndex + searchLength),
style: TextStyle(color: Colors.black),
),
],
),
),
),
),
);
},
);
1条答案
按热度按时间6l7fqoea1#
在InkWell onTap中,在三个位置(url、productName、productPrice)将index替换为searchIndex:
在领先的CircleAvatar网络图像索引中,搜索索引: