flutter问题:当我在flutter中从另一个页面进行搜索时，如何反映另一个网页中的更改

Question

这是我的"TabTop"；搜索ui代码。在这个搜索页面中，我有一个搜索功能，它将数据存储在"eventsSearchLists；并且我还有一个变量"1"；eventsListData"；在这个变量中，我有以前的数据。当我搜索任何东西时，数据会在变量中发生变化，但它不会反映另一个页面。

当搜索数据确实进入时；eventsListData"；则时间没有改变但当我使用"0"时的数据；ctrl+s"；则数据反映

这是事件ListData我的全局变量

import 'dart:async';
import 'package:cwc/ApiManager/api_magager.dart';
import 'package:flutter/material.dart';
import 'constants.dart';
class TabTop extends StatefulWidget {
const TabTop({Key? key}) : super(key: key);
@override
State<TabTop> createState() => _TabTopState();
}
class _TabTopState extends State<TabTop> {
ApiManager apiManager = ApiManager();
@override
void initState() {
super.initState();
}
String query = '';
Timer? debouncer;
void dispose() {
debouncer?.cancel();
super.dispose();
}
void debounce(
VoidCallback callback, {
Duration duration = const Duration(milliseconds: 10),
}) {
if (debouncer != null) {
debouncer!.cancel();
}
debouncer = Timer(duration, callback);
}
Future searchEvent(String query) async => debounce(() async {
// final breanchesLists = await apiManager.topBrancesList(query);
final eventsLists = await apiManager.eventsSearch(query);
if (!mounted) return;
setState(() {
this.query = query;
eventsSearchLists = eventsLists;
print("eventsSearchLists $eventsSearchLists");
setState(() {
eventsListData =[eventsSearchLists];
print("eventsSearchLists111 $eventsListData");
});
});
});
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(vertical: 8),
height: 60,
child: TextField(
onChanged: searchEvent,
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: const Color(0xFFFFFFFF),
hintText: 'Search for Events',
suffixIcon: const Icon(
Icons.search_outlined,
color: Color(0xFF444444),
),
),
),
);
}
}

这是我的另一个页面，我称之为"；TabTop"；还有其他事情。

// ignore_for_file: prefer_const_constructors
import 'package:cwc/constants/card_top.dart';
import 'package:cwc/constants/top_card.dart';
import 'package:cwc/ui/Event/components/activities.dart';
import 'package:cwc/ui/Event/components/event_page_changer.dart';
import 'package:cwc/ui/Event/components/event_tab_view.dart';
import 'package:cwc/ui/Home/components/search_components.dart';
import 'package:cwc/ui/Home/home_page.dart';
import 'package:cwc/ui/footer/bottom_nav_bar.dart';
import 'package:cwc/ui/footer/bottom_nav_bar_event.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class Event extends StatefulWidget {
const Event({Key? key}) : super(key: key);
@override
_EventState createState() => _EventState();
}
class _EventState extends State<Event> {
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
// backgroundColor: Color(0xff80CAD7),
body: SafeArea(
child: Stack(
children: [
Container(
width: double.infinity,
height: 210,
decoration: const BoxDecoration(
color: Color(0xff80CAD7),
image: DecorationImage(
image: AssetImage('assets/bg_dummy.png'),
fit: BoxFit.cover,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(18, 12, 0, 0),
child: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: const CircleAvatar(
radius: 25,
backgroundColor: Colors.white,
child: Icon(Icons.arrow_back_ios_new, color: Colors.black),
),
),
),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(18, 125, 18, 0),
child: TabTop(),
),

Padding(
padding:  EdgeInsets.only(top: 190),
child: Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(24.0),
topLeft: Radius.circular(24.0)),
),
child: Activities()),  // here is my list of data in Activities page (Showing data in this page)
)
// EventPageChanger(),
// Expanded(child: Activities()),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => HomePage()));
},
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Image.asset('assets/btnavico.png'),
elevation: 5.0,
highlightElevation: 10,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: Container(
// height: MediaQuery.of(context).size.height * (10 / 100),
child: BottomNavBarEvent()),
);
}
}

Answer 1

这里发生的事情是，在加载新数据时，在TabTop内部调用setState，这只导致TabTop重建，即只重建TabTop内部的小部件。但是，显示数据的Activities((小部件在Event类中，该类不会重新生成。因此，我们需要一种方法来在数据更新后重建整个Event类。您可以通过以下方式实现：

在TabTop类中定义一个回调函数，该函数可以在数据更新后调用为：

class TabTop extends StatefulWidget {
const TabTop({Key? key,required this.onDataUpdated}) : super(key: key);
final VoidCallback onDataUpdated;
@override
State<TabTop> createState() => _TabTopState();
}

并在数据更新后调用此回调函数：

Future searchEvent(String query) async => debounce(() async {
// final breanchesLists = await apiManager.topBrancesList(query);
final eventsLists = await apiManager.eventsSearch(query);
if (!mounted) return;
///callback function has been called here
widget.onDataUpdated();
///avoid unnecessary setState
setState(() {
this.query = query;
eventsSearchLists = eventsLists;
eventsListData =[eventsSearchLists];
print("eventsSearchLists111 $eventsListData");
print("eventsSearchLists $eventsSearchLists”);
});
});

在Event类上，在调用TabTop时，将回调函数作为参数发送为：

Padding(
padding: EdgeInsets.fromLTRB(18, 125, 18, 0),
child: TabTop(
onDataUpdated : () =>setState((){}),
),
),