[英]How to update the visibility of widgets whose data is stored in firebase firestore?
我試圖顯示兩個列表,其數據是使用 stream 構建器從 firebase 火庫更新的。 一個列表包含所有任務,另一個列表包含字段值為“taskStatus”的任務。 一切正常,我想添加這樣的功能:當“已完成任務”列表中沒有數據時,通過更改可見性小部件中可見參數的 state,整個小部件區域應該變得不可見。 下面是根據 firebase 的快照數據更改可見性的代碼:
Expanded(
child: StreamBuilder<List<Task>>(
stream: DatabaseService().getCompletedTasks(orderName),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Loading();
}
List<Task>? completedTasks = snapshot.data;
return Opacity(
opacity: snapshot.data!.isEmpty ? 0 : 1,
child: Column(
children: [
Container(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 30, vertical: 20),
child: Text(
"Completed Tasks",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.grey[700],
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: ListView.separated(
separatorBuilder: (context, index) =>
const SizedBox(
height: 5,
),
itemCount: completedTasks!.length,
itemBuilder: (context, index) {
return Dismissible(
background: Container(
color: Colors.red,
child: const Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
),
secondaryBackground: Container(
color: Colors.red,
child: const Align(
alignment: Alignment.centerRight,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
),
key: UniqueKey(),
onDismissed: (direction) {
DatabaseService()
.deleteTask(completedTasks[index].id);
AwesomeNotifications().cancelSchedule(
completedTasks[index].id);
},
child: Item(
task: completedTasks[index],
),
);
},
),
),
),
],
),
);
}),
),
要進行更改,我必須熱重載應用程序。 那么,如何在不熱重新加載應用程序的情況下更改它以更新可見性。
兩個列表的完整代碼:
body: Column(
children: [
Expanded(
child: StreamBuilder<List<Task>>(
stream: DatabaseService().getTasks(orderName),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Loading();
}
List<Task>? tasks = snapshot.data;
if (snapshot.data!.isEmpty) {
return StreamBuilder(
stream: DatabaseService().getUniqueIDs(),
builder: (context, snapshot) =>
Column(
children: [
Container(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 30, vertical: 40),
child: Text(
"Tasks",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.grey[700],
),
),
),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 30),
child: Container(
alignment: Alignment.center,
child: const Text(
"Great! You don't have any remaining tasks.",
style: TextStyle(
fontSize: 20,
fontFamily: "Roboto",
color: Colors.black,
),
),
),
),
const SizedBox(
height: 40,
),
Image(
image:
const AssetImage('assets/images/tasks.png'),
height: MediaQuery
.of(context)
.size
.height * 0.3,
),
],
),
);
}
return Column(
children: [
Container(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 30, vertical: 40),
child: Text(
"Tasks",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.grey[700],
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: ListView.separated(
separatorBuilder: (context, index) =>
const SizedBox(
height: 5,
),
itemCount: tasks!.length,
itemBuilder: (context, index) {
return Dismissible(
background: Container(
color: Colors.red,
child: const Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
),
secondaryBackground: Container(
color: Colors.red,
child: const Align(
alignment: Alignment.centerRight,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
),
key: UniqueKey(),
onDismissed: (direction) {
DatabaseService()
.deleteTask(tasks[index].id);
AwesomeNotifications()
.cancelSchedule(tasks[index].id);
},
child: Item(
task: tasks[index],
),
);
},
),
),
),
],
);
}),
),
Expanded(
child: StreamBuilder<List<Task>>(
stream: DatabaseService().getCompletedTasks(orderName),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Loading();
}
List<Task>? completedTasks = snapshot.data;
return snapshot.data!.isEmpty ? SizedBox.shrink() : Column(
children: [
Container(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 30, vertical: 20),
child: Text(
"Completed Tasks",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.grey[700],
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: ListView.separated(
separatorBuilder: (context, index) =>
const SizedBox(
height: 5,
),
itemCount: completedTasks!.length,
itemBuilder: (context, index) {
return Dismissible(
background: Container(
color: Colors.red,
child: const Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
),
secondaryBackground: Container(
color: Colors.red,
child: const Align(
alignment: Alignment.centerRight,
child: Padding(
padding: EdgeInsets.all(15.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
),
key: UniqueKey(),
onDismissed: (direction) {
DatabaseService()
.deleteTask(completedTasks[index].id);
AwesomeNotifications().cancelSchedule(
completedTasks[index].id);
},
child: Item(
task: completedTasks[index],
),
);
},
),
),
),
],);
}),
),
],
),
你不需要另一個參數,這樣做:
retutn snapshot.data!.isEmpty ? SizedBox(): Column(
children: [
...
],
)
或者如果你只想讓它不可見,試試這個:
Opacity(
opacity: snapshot.data!.isEmpty ? 0 : 1,
child: Column(
children: [
...
],
),
),
當您想在某個條件下隱藏或顯示小部件時,無需使用空SizedBox()
。 代替SizedBox()
使用SizedBox.shrink()
,它會占用盡可能小的空間並且比使用空SizedBox()
更優化
return snapshot.data!.isEmpty ? SizedBox.shrink(): Column(
children: [
...
],
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.