Flutter：仅当我单击扩展图块时才调用 getData 函数
Flutter : call getData function only when I click on expansion tile
我有一个复杂的 UI ，正在显示一个由许多扩展图块组成的 listViewbuilder。
首先，我检索显示它的数据列表，然后调用另一个函数，我将对象的 ID 赋予该函数以在单击扩展图块时显示详细信息。这里唯一的问题是代码复杂度太高，假设我们每次调用函数时列表中有 20 个项目 returns 使用 futurebuilder 或 provider 的项目的详细信息它将调用函数 20 次即使我没有单击扩展图块来查看详细信息。我希望只有在单击扩展图块时才能调用我的未来功能。
这是我的观点：
enter image description here
这是我使用提供商和未来构建器的代码
child: FutureBuilder(
future: futureQrqc,
builder: (BuildContext context,
AsyncSnapshot<QrqcDetails?> snapshot) {
if (snapshot.hasData) {
String? backgroundImage;
String? _setImage() {
String _mTitle = "${snapshot.data!.type}";
if(_mTitle == "Delivery") {
backgroundImage = "assets/icons/delivery.png";
} else if(_mTitle == "Security") {
backgroundImage = "assets/icons/security.png";
}
else if(_mTitle == "Quality") {
backgroundImage = "assets/icons/quality.png";
}
else if(_mTitle == "Cost") {
backgroundImage = "assets/icons/Cost.png";
}
else if(_mTitle == "People") {
backgroundImage = "assets/icons/people.png";
}
print("_mTitle: $_mTitle");
print("_mTitle: $backgroundImage");
return backgroundImage; // here it returns your _backgroundImage value
}
return Column(
children: [
ConditionalBuilder(
condition: myQrqcListViewModel
.articlesList[index].status ==
'INIT',
builder: (context) => Container(
// ignore: prefer_const_constructors
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20)),
),
foregroundDecoration:
const RotatedCornerDecoration(
color: Colors.orange,
geometry: BadgeGeometry(
width: 40,
height: 40,
cornerRadius: 16),
textSpan: TextSpan(
text: 'INIT',
style: TextStyle(
fontSize: 10,
letterSpacing: 1,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
child: ExpansionTile(
title: Text(
myQrqcListViewModel
.articlesList[index].id
.toString(),
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black),
),
leading: QrqcCardLeaing(
imgPath: _setImage(),
),
subtitle: Text(myQrqcListViewModel
.articlesList[index].title),
trailing: QrqcCardtrailing(percent: myQrqcListViewModel
.articlesList[index]
.progress
.toString(),text: myQrqcListViewModel
.articlesList[index]
.progress
.toString(),),
children: [
QrqcDetailsCardFirstRow(product: snapshot.data?.product?? "No product" ,role: myQrqcListViewModel
.articlesList[index].role, ),
const SizedBox(height: 10),
Row(
children: [
Expanded(
child: Image.asset(
"assets/icons/location.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data!.perimeter,
style: TextStyle(fontSize: 10),
)),
const SizedBox(width: 50),
Expanded(
child: Image.asset(
"assets/icons/calendar.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
convertDateTimeDisplay(snapshot.data!.creation_date),
style: TextStyle(fontSize: 10),
)),
],
),
const SizedBox(height: 10),
],
),
),
fallback: null,
),
ConditionalBuilder(
condition: myQrqcListViewModel
.articlesList[index].status ==
'SUBMITTED',
builder: (context) => Container(
// ignore: prefer_const_constructors
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20)),
),
foregroundDecoration:
const RotatedCornerDecoration(
color: Colors.blueAccent,
geometry: BadgeGeometry(
width: 40,
height: 40,
cornerRadius: 16),
textSpan: TextSpan(
text: 'SUB',
style: TextStyle(
fontSize: 10,
letterSpacing: 1,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
child: ExpansionTile(
leading: QrqcCardLeaing(
imgPath: _setImage(),
),
title: Text(
myQrqcListViewModel
.articlesList[index].id
.toString(),
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black),
),
subtitle: Text(myQrqcListViewModel
.articlesList[index].title),
trailing: Column(
children: [
Expanded(
child: CircularPercentIndicator(
radius: 20.0,
lineWidth: 2.0,
percent: double.parse(
myQrqcListViewModel
.articlesList[index]
.progress
.toString()) /
100,
center: Text(
myQrqcListViewModel
.articlesList[index]
.progress
.toString(),
style: const TextStyle(
fontSize: 10),
),
progressColor: kPrimaryColor,
)),
],
),
children: [
Row(
children: [
Expanded(
child: Image.asset(
"assets/icons/user.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
myQrqcListViewModel
.articlesList[index].role,
style: const TextStyle(
fontSize: 10),
)),
const SizedBox(width: 50),
Expanded(
child: Image.asset(
"assets/icons/product.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data?.product?? "No product" ,
style: TextStyle(fontSize: 10),
)),
],
),
const SizedBox(height: 10),
Row(
children: [
Expanded(
child: Image.asset(
"assets/icons/location.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data!.perimeter,
style: TextStyle(fontSize: 10),
)),
const SizedBox(width: 50),
Expanded(
child: Image.asset(
"assets/icons/calendar.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data!.creation_date,
style: TextStyle(fontSize: 10),
)),
],
),
const SizedBox(height: 10),
],
),
),
fallback: null,
),
ConditionalBuilder(
condition: myQrqcListViewModel
.articlesList[index].status ==
'VALIDATED',
builder: (context) => Container(
// ignore: prefer_const_constructors
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20)),
),
foregroundDecoration:
const RotatedCornerDecoration(
color: Colors.green,
geometry: BadgeGeometry(
width: 40,
height: 40,
cornerRadius: 16),
textSpan: TextSpan(
text: 'VALID',
style: TextStyle(
fontSize: 10,
letterSpacing: 1,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
child: ExpansionTile(
leading: QrqcCardLeaing(
imgPath: _setImage(),
),
title: Text(
myQrqcListViewModel
.articlesList[index].id
.toString(),
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black),
),
subtitle: Text(myQrqcListViewModel
.articlesList[index].title),
trailing: Column(
children: [
Expanded(
child: CircularPercentIndicator(
radius: 20.0,
lineWidth: 2.0,
percent: double.parse(
myQrqcListViewModel
.articlesList[index]
.progress
.toString()) /
100,
center: Text(
myQrqcListViewModel
.articlesList[index]
.progress
.toString(),
style: const TextStyle(
fontSize: 10),
),
progressColor: kPrimaryColor,
)),
],
),
children: [
Row(
children: [
Expanded(
child: Image.asset(
"assets/icons/user.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
myQrqcListViewModel
.articlesList[index].role,
style: const TextStyle(
fontSize: 10),
)),
const SizedBox(width: 50),
Expanded(
child: Image.asset(
"assets/icons/product.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data?.product?? "No product" ,
style: TextStyle(fontSize: 10),
)),
],
),
const SizedBox(height: 10),
Row(
children: [
Expanded(
child: Image.asset(
"assets/icons/location.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data!.perimeter,
style: TextStyle(fontSize: 10),
)),
const SizedBox(width: 50),
Expanded(
child: Image.asset(
"assets/icons/calendar.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data!.creation_date,
style: TextStyle(fontSize: 10),
)),
],
),
const SizedBox(height: 10),
],
),
),
fallback: null,
),
);
} else if (snapshot.hasError) {
return NoDataUI();
}
print(snapshot.error.toString());
return const Center(
child: CircularProgressIndicator());
})
如果有人可以提供帮助，请不要犹豫，这是在商店中为用户推出我的应用程序之前优化我的代码的重要问题。非常感谢，编码愉快 :)
您可以用 GestureDetector 或 InkWell 包装您的 ExpansionTile 并在 onTap 方法中调用函数。
我有一个复杂的 UI ，正在显示一个由许多扩展图块组成的 listViewbuilder。 首先，我检索显示它的数据列表，然后调用另一个函数，我将对象的 ID 赋予该函数以在单击扩展图块时显示详细信息。这里唯一的问题是代码复杂度太高，假设我们每次调用函数时列表中有 20 个项目 returns 使用 futurebuilder 或 provider 的项目的详细信息它将调用函数 20 次即使我没有单击扩展图块来查看详细信息。我希望只有在单击扩展图块时才能调用我的未来功能。 这是我的观点： enter image description here
这是我使用提供商和未来构建器的代码
child: FutureBuilder(
future: futureQrqc,
builder: (BuildContext context,
AsyncSnapshot<QrqcDetails?> snapshot) {
if (snapshot.hasData) {
String? backgroundImage;
String? _setImage() {
String _mTitle = "${snapshot.data!.type}";
if(_mTitle == "Delivery") {
backgroundImage = "assets/icons/delivery.png";
} else if(_mTitle == "Security") {
backgroundImage = "assets/icons/security.png";
}
else if(_mTitle == "Quality") {
backgroundImage = "assets/icons/quality.png";
}
else if(_mTitle == "Cost") {
backgroundImage = "assets/icons/Cost.png";
}
else if(_mTitle == "People") {
backgroundImage = "assets/icons/people.png";
}
print("_mTitle: $_mTitle");
print("_mTitle: $backgroundImage");
return backgroundImage; // here it returns your _backgroundImage value
}
return Column(
children: [
ConditionalBuilder(
condition: myQrqcListViewModel
.articlesList[index].status ==
'INIT',
builder: (context) => Container(
// ignore: prefer_const_constructors
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20)),
),
foregroundDecoration:
const RotatedCornerDecoration(
color: Colors.orange,
geometry: BadgeGeometry(
width: 40,
height: 40,
cornerRadius: 16),
textSpan: TextSpan(
text: 'INIT',
style: TextStyle(
fontSize: 10,
letterSpacing: 1,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
child: ExpansionTile(
title: Text(
myQrqcListViewModel
.articlesList[index].id
.toString(),
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black),
),
leading: QrqcCardLeaing(
imgPath: _setImage(),
),
subtitle: Text(myQrqcListViewModel
.articlesList[index].title),
trailing: QrqcCardtrailing(percent: myQrqcListViewModel
.articlesList[index]
.progress
.toString(),text: myQrqcListViewModel
.articlesList[index]
.progress
.toString(),),
children: [
QrqcDetailsCardFirstRow(product: snapshot.data?.product?? "No product" ,role: myQrqcListViewModel
.articlesList[index].role, ),
const SizedBox(height: 10),
Row(
children: [
Expanded(
child: Image.asset(
"assets/icons/location.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data!.perimeter,
style: TextStyle(fontSize: 10),
)),
const SizedBox(width: 50),
Expanded(
child: Image.asset(
"assets/icons/calendar.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
convertDateTimeDisplay(snapshot.data!.creation_date),
style: TextStyle(fontSize: 10),
)),
],
),
const SizedBox(height: 10),
],
),
),
fallback: null,
),
ConditionalBuilder(
condition: myQrqcListViewModel
.articlesList[index].status ==
'SUBMITTED',
builder: (context) => Container(
// ignore: prefer_const_constructors
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20)),
),
foregroundDecoration:
const RotatedCornerDecoration(
color: Colors.blueAccent,
geometry: BadgeGeometry(
width: 40,
height: 40,
cornerRadius: 16),
textSpan: TextSpan(
text: 'SUB',
style: TextStyle(
fontSize: 10,
letterSpacing: 1,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
child: ExpansionTile(
leading: QrqcCardLeaing(
imgPath: _setImage(),
),
title: Text(
myQrqcListViewModel
.articlesList[index].id
.toString(),
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black),
),
subtitle: Text(myQrqcListViewModel
.articlesList[index].title),
trailing: Column(
children: [
Expanded(
child: CircularPercentIndicator(
radius: 20.0,
lineWidth: 2.0,
percent: double.parse(
myQrqcListViewModel
.articlesList[index]
.progress
.toString()) /
100,
center: Text(
myQrqcListViewModel
.articlesList[index]
.progress
.toString(),
style: const TextStyle(
fontSize: 10),
),
progressColor: kPrimaryColor,
)),
],
),
children: [
Row(
children: [
Expanded(
child: Image.asset(
"assets/icons/user.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
myQrqcListViewModel
.articlesList[index].role,
style: const TextStyle(
fontSize: 10),
)),
const SizedBox(width: 50),
Expanded(
child: Image.asset(
"assets/icons/product.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data?.product?? "No product" ,
style: TextStyle(fontSize: 10),
)),
],
),
const SizedBox(height: 10),
Row(
children: [
Expanded(
child: Image.asset(
"assets/icons/location.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data!.perimeter,
style: TextStyle(fontSize: 10),
)),
const SizedBox(width: 50),
Expanded(
child: Image.asset(
"assets/icons/calendar.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data!.creation_date,
style: TextStyle(fontSize: 10),
)),
],
),
const SizedBox(height: 10),
],
),
),
fallback: null,
),
ConditionalBuilder(
condition: myQrqcListViewModel
.articlesList[index].status ==
'VALIDATED',
builder: (context) => Container(
// ignore: prefer_const_constructors
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20)),
),
foregroundDecoration:
const RotatedCornerDecoration(
color: Colors.green,
geometry: BadgeGeometry(
width: 40,
height: 40,
cornerRadius: 16),
textSpan: TextSpan(
text: 'VALID',
style: TextStyle(
fontSize: 10,
letterSpacing: 1,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
child: ExpansionTile(
leading: QrqcCardLeaing(
imgPath: _setImage(),
),
title: Text(
myQrqcListViewModel
.articlesList[index].id
.toString(),
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black),
),
subtitle: Text(myQrqcListViewModel
.articlesList[index].title),
trailing: Column(
children: [
Expanded(
child: CircularPercentIndicator(
radius: 20.0,
lineWidth: 2.0,
percent: double.parse(
myQrqcListViewModel
.articlesList[index]
.progress
.toString()) /
100,
center: Text(
myQrqcListViewModel
.articlesList[index]
.progress
.toString(),
style: const TextStyle(
fontSize: 10),
),
progressColor: kPrimaryColor,
)),
],
),
children: [
Row(
children: [
Expanded(
child: Image.asset(
"assets/icons/user.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
myQrqcListViewModel
.articlesList[index].role,
style: const TextStyle(
fontSize: 10),
)),
const SizedBox(width: 50),
Expanded(
child: Image.asset(
"assets/icons/product.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data?.product?? "No product" ,
style: TextStyle(fontSize: 10),
)),
],
),
const SizedBox(height: 10),
Row(
children: [
Expanded(
child: Image.asset(
"assets/icons/location.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data!.perimeter,
style: TextStyle(fontSize: 10),
)),
const SizedBox(width: 50),
Expanded(
child: Image.asset(
"assets/icons/calendar.png",
width: 20,
height: 20,
),
),
Expanded(
child: Text(
snapshot.data!.creation_date,
style: TextStyle(fontSize: 10),
)),
],
),
const SizedBox(height: 10),
],
),
),
fallback: null,
),
);
} else if (snapshot.hasError) {
return NoDataUI();
}
print(snapshot.error.toString());
return const Center(
child: CircularProgressIndicator());
})
如果有人可以提供帮助，请不要犹豫，这是在商店中为用户推出我的应用程序之前优化我的代码的重要问题。非常感谢，编码愉快 :)
您可以用 GestureDetector 或 InkWell 包装您的 ExpansionTile 并在 onTap 方法中调用函数。