尝试搜索功能到我的Flutter笔记应用程序

Question

我试图添加搜索功能到我的笔记应用程序，但我的gridview似乎不工作。我修改了我的代码不同的时间为Gridview，但相同的结果。NoteReaderScreen(noteData: note.data())总是红色的。任何帮助都可以接受，谢谢

home_screen.dart:

import 'package:BetterNotes/screens/note_editor.dart';
import 'package:BetterNotes/screens/note_reader.dart';
import 'package:BetterNotes/screens/settings.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import '../style/app_style.dart';
class HomeScreen extends StatefulWidget {
final Color backgroundColor;
const HomeScreen({Key? key, required this.backgroundColor}) : super(key: key);
@override
_HomeScreenState createState() =>
_HomeScreenState(backgroundColor: AppStyle.mainColor);
}
class _HomeScreenState extends State<HomeScreen> {
final Color backgroundColor;
final TextEditingController _searchController = TextEditingController();
_HomeScreenState({required this.backgroundColor});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppStyle.mainColor,
appBar: AppBar(
elevation: 0,
title: const Text('Better Notes'),
centerTitle: true,
backgroundColor: AppStyle.mainColor,
actions: [
IconButton(
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SettingsScreen()));
},
icon: const Icon(Icons.settings))
],
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
"Your recent Notes",
style: GoogleFonts.roboto(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 22),
),
const SizedBox(
width: 10,
),
Expanded(
child: TextField(
controller: _searchController,
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
prefixIcon: const Icon(
Icons.search,
color: Colors.white,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
],
),
const SizedBox(
height: 20,
),
Expanded(
child: StreamBuilder<QuerySnapshot>(
// Set the stream to either all documents from the 'notes' collection,
// or a filtered subset of the documents based on the user's search query.
stream: _searchController.text.isEmpty
? FirebaseFirestore.instance.collection('notes').snapshots()
: FirebaseFirestore.instance
.collection('notes')
.where('note_title', isEqualTo: _searchController.text)
.snapshots(),
builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
// Show a loading indicator while the stream is waiting for data.
return const Center(
child: CircularProgressIndicator(),
);
}
if (snapshot.hasData) {
// Get the list of documents from the snapshot.
final List<DocumentSnapshot> notes = snapshot.data!.docs;
// Filter the list of documents based on the search query.
final List<DocumentSnapshot> matchingNotes = notes
.where((note) => note['note_title']
.toString()
.toLowerCase()
.contains(_searchController.text.toLowerCase()))
.toList();
// Map the list of documents to a list of NotesCard widgets.
// Pass the data from each document to the NotesCard widgets as arguments.
return GridView.count(
crossAxisCount: 2,
children: matchingNotes
.map((note) => NotesCard(
noteData: note.data(),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NoteReaderScreen(
noteData: note.data(),
),
),
);
},
))
.toList(),
);
}
return const Center(
child: Text("No notes found"),
);
},
),
),
],
),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const NoteEditorScreen()));
},
label: const Text("Add"),
icon: const Icon(
Icons.add,
color: Colors.white,
),
backgroundColor: Colors.purple,
),
);
}
}

多次更改，结果相同

Answer 1

当文本字段改变时，您没有设置状态。您可以使用以下命令更改该小部件。

Expanded(
child: TextField(
onChanged: (value){setState(() {});},
controller: _searchController,
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
prefixIcon: const Icon(
Icons.search,
color: Colors.white,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
],
),