Riverpod StateNotifier不使用悬停逻辑
Riverpod StateNotifier不使用悬停逻辑
提问于 2021-12-14 03:03:10
我正在尝试使用Riverpod，它是StateNotifier，以控制我的肚脐。下面是我的代码：
StateNotifier文件
import 'package:flutter_riverpod/flutter_riverpod.dart';
final navigationControllerRP =
StateNotifierProvider<NavigationControllerRP, NavigationControllerElement>(
(ref) => NavigationControllerRP());
class NavigationControllerRP
extends StateNotifier<NavigationControllerElement> {
NavigationControllerRP() : super(NavigationControllerElement("Home", ""));
void changeActiveTo(String item) {
state = NavigationControllerElement(item, "");
state = state;
}
void changeHoverTo(String item) {
if (item != state.activeItem) {
state = NavigationControllerElement(state.activeItem, item);
state = state;
}
}
bool isActive(String item) {
return state.activeItem == item;
}
bool isHover(String item) {
return state.hoverItem == item;
}
}
class NavigationControllerElement {
var activeItem = "";
var hoverItem = "";
NavigationControllerElement(this.activeItem, this.hoverItem);
}通知程序的使用文件
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:get/get.dart';
import 'package:platform/constants/controllers.dart';
import 'package:platform/constants/style.dart';
import 'package:platform/controllers/navigation.dart';
import 'package:platform/widgets/custom_text.dart';
class NavBarElement extends ConsumerWidget {
/// Creates a navbar element which can be displayed at the top of the page.
final String title;
final String url;
final String route;
NavBarElement({
required this.title,
required this.url,
required this.route,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
return InkWell(
highlightColor: Colors.transparent,
hoverColor: Colors.transparent,
child: Padding(
padding: EdgeInsets.all(20.0),
child: Consumer(
builder: (BuildContext context, WidgetRef ref, Widget? child) {
return Column(
children: [
CustomText(
text: this.title,
size: 16,
color: ref
.watch(navigationControllerRP.notifier)
.isActive(this.title)
? Color.fromRGBO(70, 70, 70, 1)
: Colors.grey,
weight: FontWeight.w500,
),
SizedBox(
height: 7,
),
ref
.watch(navigationControllerRP.notifier)
.isActive(this.title)
? Container(width: 50, height: 1, color: Colors.black)
: Container(),
ref.watch(navigationControllerRP.notifier).isHover(this.title)
? Container(width: 50, height: 1, color: Colors.red)
: Container(),
],
);
},
)),
onTap: () {
ref.watch(navigationControllerRP.notifier).changeActiveTo(this.title);
// navigationController.changeActiveTo(this.route);
Get.toNamed(route);
},
onHover: (value) {
value
? ref
.watch(navigationControllerRP.notifier)
.changeHoverTo(this.title)
: ref.watch(navigationControllerRP.notifier).changeHoverTo("none");
},
);
}
}我的activeItem逻辑工作正常，但hoverItem逻辑似乎不能工作。每次我在导航条元素上悬停时，它似乎都在更新状态，即为我的NavigationControllerElement对象设置NavigationControllerElement对象的状态，但它没有反映在UI中。请告诉我怎么解决这个问题。提前感谢！
回答 1
Stack Overflow用户
发布于 2021-12-14 20:13:11
使用StateNotifier的方式是不正确的。StateNotifier不应该在state之外具有任何可列表的内容。
特别是，您所做的错误是在UI使用的StateNotifier上添加getter/方法：
class Model{...}
class MyNotifier extends StateNotifier<Model> {
...
bool isActive(Item item) => state.activeItem == item; // DON'T DO THIS
}然后用作：
final isActive: ref.watch(myProvider.notifier).isActive(myItem);相反，这应该出现在您的状态类上：
class Model{
bool isActive(Item item) => activeItem == item;
}
class MyNotifier extends StateNotifier<Model> {
}然后用作：
final isActive: ref.watch(myProvider).isActive(myItem);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70343311
复制相关文章
相似问题
腾讯云开发者
