如何从用作Obx flutter getx中的子小部件的公共小部件中使用控制器中的函数

Question

我有一个UI小部件，它使用带有函数作为参数传递的普通子小部件。这些函数来自控制器类。我在父UI小部件中使用Obx我将粘贴现在的内容

控制器类

class OController extends GetxController {
static OController instance = Get.find();
// ignore: unnecessary_cast
OverviewController();
void onSearchButtonPressed() {
Get.toNamed(ScreenSearchDsf.routeName);
}
void onScanButtonPressed() {
Get.toNamed(ScreenScan.routeName);
}
}

通用子UI小部件

class BuildEmptyListDialog extends StatelessWidget {
final Function()? searchPressed;
final Function()? urlPressed;
const BuildEmptyListDialog({
super.key,
this.searchPressed,
this.urlPressed,
});
@override
Widget build(BuildContext context) {
return
// Obx(
// () =>
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
...
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
buildDialogButton(
Icons.search,
'Search Location',
onPressed: searchPressed!,
),
// controller.onSearchButtonPressed),
buildDialogButton(
Icons.link,
'Use Location URL',
onPressed: urlPressed!,
),
// controller.onScanButtonPressed)
],
),
... 
],
),
// ),
);
}
}

Widget buildDialogButton(IconData icon, String label,
{VoidCallback? onPressed}) {
return Obx(
() => Container(
decoration: BoxDecoration(
color: AppColors.dark, borderRadius: BorderRadius.circular(50)),
width: 260,
height: 50,
child: TextButton.icon(
onPressed: onPressed,
icon: Icon(
icon,
color: AppColors.white,
),
...
),
),
);
}

父UI部件

class OverviewScreen extends StatelessWidget {
OverviewScreen({super.key});

@override
Widget build(BuildContext context) {
final controller = Get.put(OController());
final dbReference = FirebaseDatabase.instance.ref();
final ScrollController scrollController = ScrollController();
return Obx(
() => Container(
child: (ForValue == null)
? const Center(
child: LoadingAnimation(
color: AppColors.contrastMedium,
),
)
: StreamBuilder(
stream: dbReference
.child(
'......')
.onValue,
builder: (context, snapshot) {
if (snapshot.hasData &&
snapshot.data != null &&
(snapshot.data! as DatabaseEvent).snapshot.value !=
null) {
final dsfData = Map<dynamic, dynamic>.from(
(snapshot.data! as DatabaseEvent).snapshot.value
as Map<dynamic, dynamic>);
List<Obj> dItems = [];
dData.forEach((key, value) {
Obj obj = Obj(value);
obj = key;
dItems.add(obj);
dItems.toSet().toList();
});
return SingleChildScrollView(
...
);
} else {
// when there are no obj data to show
return Center(
child: BuildEmptyListDialog(
searchPressed: controller.onSearchButtonPressed,
urlPressed: controller.onAddDsfViaUrlPressed,
),
// child: LoadingAnimation(
//   color: ...
// ),
);
}
},
),
),
);
}
}

当我试图原谅这一点时，我得到这个错误'[get] GetX的不当使用已被检测到。’，我对Getx和概念相当陌生。我哪里做错了?有人能帮我重构我的代码和方法吗?多帮助。

Answer 1

像这样更改父UI小部件:

class OverviewScreen extends StatelessWidget {
OverviewScreen({super.key});

@override
Widget build(BuildContext context) {
final controller = Get.put(OController());
final dbReference = FirebaseDatabase.instance.ref();
final ScrollController scrollController = ScrollController();
return Container(
child: (ForValue == null)
? const Center(
child: LoadingAnimation(
color: AppColors.contrastMedium,
),
)
: StreamBuilder(
stream: dbReference
.child(
'......')
.onValue,
builder: (context, snapshot) {
if (snapshot.hasData &&
snapshot.data != null &&
(snapshot.data! as DatabaseEvent).snapshot.value !=
null) {
final dsfData = Map<dynamic, dynamic>.from(
(snapshot.data! as DatabaseEvent).snapshot.value
as Map<dynamic, dynamic>);
List<Obj> dItems = [];
dData.forEach((key, value) {
Obj obj = Obj(value);
obj = key;
dItems.add(obj);
dItems.toSet().toList();
});
return SingleChildScrollView(
...
);
} else {
// when there are no obj data to show
return Obx(() => Center(
child: BuildEmptyListDialog(
searchPressed: controller.onSearchButtonPressed,
urlPressed: controller.onAddDsfViaUrlPressed,
),
// child: LoadingAnimation(
//   color: ...
// ),
));
}
},
),
);
}
}

当你包装一个没有可观察对象的小部件时会出现这个错误。所以现在通常你不会再得到这个错误了