如何在Flutter中对JSON数据执行文本搜索? [英] How to perform a text search over JSON data in Flutter?
本文介绍了如何在Flutter中对JSON数据执行文本搜索?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发一个需要从Firebase存储中获取一些JSON数据，然后用户可以对其进行搜索的应用程序.但是，我的搜索查询无法正常工作，并且多次执行搜索时出现一个错误.
I am working on an application which requires to fetch some JSON data from firebase storage and then a user can perform a search over it. But, my search query isn't working properly and I get one error when I perform the search multiple times.
我首先将数据上传到Firebase存储，然后将其提取.搜索有时仅在起作用.我无法弄清楚代码出了什么问题.
I have first uploaded the data to firebase storage and then fetched it. The search is working sometimes only. I cannot figure out what is wrong with the code.
这是完整的代码
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'dart:convert';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Contacts Demo',
debugShowCheckedModeBanner: false,
home: StorageUpload(),
);
}
}
class StorageUpload extends StatefulWidget {
@override
StorageUploadState createState() => new StorageUploadState();
}
class StorageUploadState extends State<StorageUpload> {
var rows = [];
String query = '';
TextEditingController tc;
@override
void initState() {
super.initState();
tc = TextEditingController();
rows = [
{
'contact_name': 'Test User 1',
'contact_phone': '066 560 4900',
},
{
'contact_name': 'Test User 2',
'contact_phone': '066 560 7865',
},
{
'contact_name': 'Test User 3',
'contact_phone': '906 500 4334',
}
];
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(
"Delivero Contacts",
style: new TextStyle(
color: Colors.white,
),
),
),
body: Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: Stack(
children: [
Column(
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: TextField(
controller: tc,
decoration: InputDecoration(hintText: 'Search...'),
onChanged: (v) {
setState(() {
query = v;
});
},
),
),
Container(
color: Colors.white,
child: ListView.builder(
shrinkWrap: true,
itemCount: rows.length,
itemBuilder: (con, ind) {
return query.isEmpty
? ListTile(
title: Text(rows[ind]['contact_name']),
subtitle: Text(rows[ind]['contact_phone']),
onTap: () {
setState(() {
tc.text = rows[ind]['contact_name'];
query = rows[ind]['contact_name'];
});
},
)
: rows[ind]['contact_name']
.toString()
.toLowerCase()
.contains(query.toLowerCase()) ||
rows[ind]['contact_phone']
.toString()
.toLowerCase()
.contains(query.toLowerCase())
? ListTile(
title: Text(rows[ind]['contact_name']),
subtitle: Text(rows[ind]['contact_phone']),
onTap: () {
setState(() {
tc.text = rows[ind]['contact_name'];
query = rows[ind]['contact_name'];
});
},
)
: null;
},
),
),
],
),
],
),
),
);
}
}
这是我遇到的错误
════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performLayout():
'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 662 pos 16: 'indexOf(child) == index': is not true.
Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
https://github.com/flutter/flutter/issues/new?template=BUG.md
The relevant error-causing widget was
ListView
lib/main.dart:104
When the exception was thrown, this was the stack
#2 RenderSliverMultiBoxAdaptor.debugAssertChildListIsNonEmptyAndContiguous.<anonymous closure>
package:flutter/…/rendering/sliver_multi_box_adaptor.dart:662
#3 RenderSliverMultiBoxAdaptor.debugAssertChildListIsNonEmptyAndContiguous
package:flutter/…/rendering/sliver_multi_box_adaptor.dart:666
#4 RenderSliverList.performLayout
package:flutter/…/rendering/sliver_list.dart:282
#5 RenderObject.layout
package:flutter/…/rendering/object.dart:1767
#6 RenderSliverEdgeInsetsPadding.performLayout
package:flutter/…/rendering/sliver_padding.dart:135
...
The following RenderObject was being processed when the exception was fired: RenderSliverList#5c228 relayoutBoundary=up17 NEEDS-LAYOUT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: RenderSliverList#5c228 relayoutBoundary=up17 NEEDS-LAYOUT NEEDS-COMPOSITING-BITS-UPDATE
needs compositing
parentData: paintOffset=Offset(0.0, 0.0) (can use size)
constraints: SliverConstraints(AxisDirection.down, GrowthDirection.forward, ScrollDirection.idle, scrollOffset: 0.0, remainingPaintExtent: Infinity, crossAxisExtent: 372.7, crossAxisDirection: AxisDirection.right, viewportMainAxisExtent: Infinity, remainingCacheExtent: Infinity, cacheOrigin: 0.0)
geometry: SliverGeometry(scrollExtent: 224.0, paintExtent: 224.0, maxPaintExtent: 224.0, cacheExtent: 224.0)
scrollExtent: 224.0
paintExtent: 224.0
maxPaintExtent: 224.0
cacheExtent: 224.0
currently live children: 0 to 3
child with index 0: RenderIndexedSemantics#ea1e2 relayoutBoundary=up18
needs compositing
parentData: index=0; layoutOffset=0.0 (can use size)
constraints: BoxConstraints(w=372.7, 0.0<=h<=Infinity)
semantic boundary
size: Size(372.7, 56.0)
index: 0
child: RenderRepaintBoundary#17c6b relayoutBoundary=up19
needs compositing
parentData: <none> (can use size)
constraints: BoxConstraints(w=372.7, 0.0<=h<=Infinity)
layer: OffsetLayer#34eb7
engine layer: OffsetEngineLayer#a8a79
offset: Offset(0.0, 0.0)
size: Size(372.7, 56.0)
metrics: 0.0% useful (1 bad vs 0 good)
diagnosis: insufficient data to draw conclusion (less than five repaints)
child: RenderSemanticsAnnotations#2ecd5 relayoutBoundary=up20
parentData: <none> (can use size)
constraints: BoxConstraints(w=372.7, 0.0<=h<=Infinity)
size: Size(372.7, 56.0)
child: RenderMouseRegion#9a9a8 relayoutBoundary=up21
parentData: <none> (can use size)
constraints: BoxConstraints(w=372.7, 0.0<=h<=Infinity)
size: Size(372.7, 56.0)
listeners: enter, exit
cursor: SystemMouseCursor(click)
child with index 3: RenderIndexedSemantics#96641 relayoutBoundary=up18
needs compositing
parentData: index=3; layoutOffset=168.0 (can use size)
constraints: BoxConstraints(w=372.7, 0.0<=h<=Infinity)
semantic boundary
size: Size(372.7, 56.0)
index: 3
child: RenderRepaintBoundary#13951 relayoutBoundary=up19
needs compositing
parentData: <none> (can use size)
constraints: BoxConstraints(w=372.7, 0.0<=h<=Infinity)
layer: OffsetLayer#768be
engine layer: OffsetEngineLayer#51b91
offset: Offset(0.0, 168.0)
size: Size(372.7, 56.0)
metrics: 0.0% useful (1 bad vs 0 good)
diagnosis: insufficient data to draw conclusion (less than five repaints)
child: RenderSemanticsAnnotations#77b2c relayoutBoundary=up20
parentData: <none> (can use size)
constraints: BoxConstraints(w=372.7, 0.0<=h<=Infinity)
size: Size(372.7, 56.0)
child: RenderMouseRegion#9ae66 relayoutBoundary=up21
parentData: <none> (can use size)
constraints: BoxConstraints(w=372.7, 0.0<=h<=Infinity)
size: Size(372.7, 56.0)
listeners: enter, exit
cursor: SystemMouseCursor(click)
════════════════════════════════════════════════════════════════════════════════
我是Flutter新手.如何从Firebase存储中获取数据，对不同的JSON字段执行全文搜索?任何帮助都将是惊人的.感谢您的宝贵时间！
I am a Flutter noob. How can I perform a full-text search over different JSON field from the data fetched from firebase storage? Any help would be amazing. Thanks for your time!
推荐答案
我略微更改了您的代码以制作一个有效的示例. 我添加了一个结果List对象，并将"query.isEmpty"检查移到了ListView之前:
I slightly changed your code to make a working sample. I added a results List object and I moved the "query.isEmpty" check before the ListView:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Contacts Demo',
debugShowCheckedModeBanner: false,
home: StorageUpload(),
);
}
}
class StorageUpload extends StatefulWidget {
@override
StorageUploadState createState() => new StorageUploadState();
}
class StorageUploadState extends State<StorageUpload> {
List results = [];
var rows = [];
String query = '';
TextEditingController tc;
@override
void initState() {
super.initState();
tc = TextEditingController();
rows = [
{
'contact_name': 'Test User 1',
'contact_phone': '066 560 4900',
},
{
'contact_name': 'Test User 2',
'contact_phone': '066 560 7865',
},
{
'contact_name': 'Test User 3',
'contact_phone': '906 500 4334',
}
];
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(
"Delivero Contacts",
style: new TextStyle(
color: Colors.white,
),
),
),
body: Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: Stack(
children: [
Column(
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: TextField(
controller: tc,
decoration: InputDecoration(hintText: 'Search...'),
onChanged: (v) {
setState(() {
query = v;
setResults(query);
});
},
),
),
Container(
color: Colors.white,
child: query.isEmpty
? ListView.builder(
shrinkWrap: true,
itemCount: rows.length,
itemBuilder: (con, ind) {
return ListTile(
title: Text(rows[ind]['contact_name']),
subtitle: Text(rows[ind]['contact_phone']),
onTap: () {
setState(() {
tc.text = rows[ind]['contact_name'];
query = rows[ind]['contact_name'];
setResults(query);
});
},
);
},
)
: ListView.builder(
shrinkWrap: true,
itemCount: results.length,
itemBuilder: (con, ind) {
return ListTile(
title: Text(results[ind]['contact_name']),
subtitle: Text(results[ind]['contact_phone']),
onTap: () {
setState(() {
tc.text = results[ind]['contact_name'];
query = results[ind]['contact_name'];
setResults(query);
});
},
);
},
),
),
],
),
],
),
),
);
}
void setResults(String query) {
results = rows
.where((elem) =>
elem['contact_name']
.toString()
.toLowerCase()
.contains(query.toLowerCase()) ||
elem['contact_phone']
.toString()
.toLowerCase()
.contains(query.toLowerCase()))
.toList();
}
}
这篇关于如何在Flutter中对JSON数据执行文本搜索?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
