标签: flutter-hooks

目前正在探索functional_widgets 和flutter_hooks。对 reactjs 有同样的想法，我正在使用以下代码获取数据。

@hwidget
Widget homeScreen(BuildContext context) {
  TodoListProvider model = Provider.of<TodoListProvider>(context);
  useEffect(() {
    print('effect');
    model.fetchList();
    return () => {};
  }, []);
  return Scaffold(
    appBar: _buildAppbar(context, model),
    bottomNavigationBar: _buildBottomNav(context, model),
    floatingActionButton: _buildFloatingAction(context),
    body: PageTransitionSwitcher(
      duration: const Duration(milliseconds: 300),
      reverse: model.reverse,
      transitionBuilder: (
        Widget child,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
      ) {
        return SharedAxisTransition(
          child: child,
          animation: animation,
          secondaryAnimation: secondaryAnimation,
          transitionType: SharedAxisTransitionType.horizontal,
        );
      },
      child: _getCurrentTab(model.currentIndex),
    ),
  );
}

我不认为这是正确的方法，因为它会引发错误。

我正在使用 flutter hooks 包在屏幕上对元素进行动画处理，但显然我做错了一些事情，因为该元素没有重建为动画。这是我的代码。

class Ball extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final xController = useAnimationController(
      duration: Duration(seconds: 3),
      lowerBound: 0,
      upperBound: 2,
      initialValue: 1,
    );

    final yController = useAnimationController(
      duration: Duration(seconds: 3),
      lowerBound: 0,
      upperBound: 2,
      initialValue: 1,
    );

    useEffect(() {
      xController.repeat(reverse: true);
      yController.repeat(reverse: true);

      return () {};
    });

    return Align(
      alignment: Alignment(
        xController.value - 1,
        yController.value - 1,
      ),
      child: Container(
        width: 12,
        height: 12,
        decoration: BoxDecoration(
          color: Colors.grey[900],
          shape: BoxShape.circle,
        ),
      ),
    );
  }
} …

我有使用 flutter hooks 的非常简单的情况：

class PositionedTiles extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final counterList = useState<List<int>>([1,2,3,4,5]);
    return Scaffold(
        body: Text("Counter: ${counterList.value}"),
        floatingActionButton: FloatingActionButton(
              onPressed: () => counterList.value.removeAt(0),
              child: const Icon(Icons.sentiment_very_satisfied)),
        );
    );
  }

因此，单击后floatingActionButton打印的列表 ( counterList) 不会改变。我的结论是没有调用重建。

为什么 hook 没有看到列表已更改？

如何指示列表 ( counterList) 在调用后已更改onPressed以便重建？

几周前我读到了关于flutter hooks 的内容，现在想在我的新项目中实现它。我的“基本”小部件是一个有状态的小部件，它具有某些项目原因的混合RouteAware原因。此外，每个人都有一个提供BehaviourSubject. RouteAware该块必须由 Widget 处理，这就是其 a的原因StatefulWidget。我在这里没有详细介绍，但 bloc 是通过许多依赖项构建的，并且像这样 MyWidget(bloc: //resolve bloc here) 一样传递。

有人可以帮我将其转换为 aHookWidget以及如何添加useAwareHook 吗？

class MyBloc{

 void dispose(){}

 void didPopNext(){}

 void didPush(){}


}

class MyWidget extends StatefulWidget{

  final MyBloc bloc;

  MyWidget({key, this.bloc}) : super(key: key);

  @override
  MyWidgetState createState() => MyWidgetState();


}


class MyWidgetState extends State<MyWidget> with RouteAware{

@override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context));
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    widget.bloc.dispose();
    super.dispose();
  }

  @override …