Question

我正在尝试同时使用StateNotifier，Provider，flutter_hooks和functional_widget。

我在小部件层次结构中看到了重建，我不希望它们发生。我在下面设置了一个简单的用例。

我的集团有一个方法updateName()，其定义为

  void updateName() {
    var name = this.state.userName + "X";
    updateState(this.state.copyWith(userName: name));
  }

作为测试，当按下MenuItems之一或用户点击Update Name按钮时，我将调用此方法。我的期望是，当按下updateName()并更新StateNotifiers state时，将仅调用userAccountHeader构建函数，因为它是唯一通过以下方式监听名称的函数：

var name = useStateValue(bloc, (MenuState s) => s.userName);

但是，从我的日志中，我可以看到该树中的所有小部件都在重建中。

flutter: menuList.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: userAccountHeader.build

import 'package:apptree_client/components/menu/menu_bloc.dart';
import 'package:apptree_client/hooks/hooks.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:functional_widget_annotation/functional_widget_annotation.dart';

import 'menu_item_view.dart';
part 'menu.g.dart';

@hwidget
Widget menuDrawer(BuildContext context) {
  var bloc = useMenuBloc();
  return Drawer(child: menuList(context, bloc));
}

@hwidget
Widget userAccountHeader(BuildContext context, MenuBloc bloc) {
  var name = useStateValue(bloc, (MenuState s) => s.userName);

  print("userAccountHeader.build");
  return DrawerHeader(
    child: Column(
      children: [
        Text(name),
        MaterialButton(
          onPressed: () => bloc.updateName(),
          child: Text("Update name"),
        )
      ],
    ),
    decoration: BoxDecoration(
      color: Colors.blue,
    ),
  );
}

@hwidget
Widget menuList(BuildContext context, MenuBloc bloc) {
  var menuItems = useStateValue(bloc, (MenuState s) => s.menuItems);
  print("menuList.build");
  var menuItemsWidgets =
      menuItems.map((item) => menuListItem(context, item, bloc)).toList();

  return ListView(children: [
    userAccountHeader(context, bloc),
    ...menuItemsWidgets,
  ]);
}

@hwidget
Widget menuListItem(BuildContext context, MenuItemView view, MenuBloc bloc) {
  print("menuListItem.build");
  return ListTile(
    title: Text(view.title),
    onTap: () => bloc.updateName(),
  );
}

MenuBloc useMenuBloc() {
  final context = useContext();

  return useMemoized(
        () => MenuBloc(
      config: Provider.of(context, listen: false),
      appSettings: Provider.of(context, listen: false),
    ),
  );
}

R useStateValue<T, R>(StateNotifier<T> notifier, R selector(T value)) {
  // ignore: invalid_use_of_protected_member
  final state = useState<R>(selector(notifier.state));
  useEffect(() {
    return notifier.addListener((s) {
      var newVal = selector(s);
      if (!const DeepCollectionEquality().equals(newVal, state.value)) {
        state.value = newVal;
      }
    });
  }, [notifier]);
  return state.value;
}

Answer 1

您正在直接使用functional_widget函数，而不是使用生成的窗口小部件。因此，不是每个小部件都有各自的上下文并能够分别重建，而是创建了一个大的小部件，就像仅对部分小部件使用函数而不是小部件类那样。

要解决此问题，请使所有小部件功能调用都以大写字母开头，改为使用生成的小部件

用flutter_hooks进行不必要的重建

1 个答案: