Question

我尝试将Hero小部件与ChangeNotifierProvider和新的Navigation 2.0系统一起使用。但是我在那里遇到了问题。不使用changeNotifier时，相同的代码有效。

我面临的问题是，弹出第二页W2后，第一页中的文本（即英雄的孩子）消失了。

下面是完整的代码。 runApp(HeroTestApp2())照常工作。但是我很想让第一种方法起作用。请帮忙。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

main(List<String> args) {
  runApp(HeroTestApp());
}

class MyModel extends ChangeNotifier {
  bool _go = false;
  bool get go => _go;
  set go(bool go) {
    _go = go;
    notifyListeners();
  }
}

class HeroTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<MyModel>(
      create: (context) => MyModel(),
      builder: (context, _) {
        final state = context.watch<MyModel>();
        return MaterialApp(
          home: Navigator(
            pages: [
              MaterialPage(child: W1(onTapped: null)),
              if (state.go) MaterialPage(child: W2()),
            ],
            onPopPage: (route, result) {
              if (!route.didPop(result)) return false;
              state.go = false;
              return true;
            },
            observers: [HeroController()],
          ),
        );
      },
    );
  }
}

class HeroTestApp2 extends StatefulWidget {
  @override
  _HeroTestApp2State createState() => _HeroTestApp2State();
}

class _HeroTestApp2State extends State<HeroTestApp2> {
  bool go = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Navigator(
        pages: [
          MaterialPage(
            child: W1(onTapped: () {
              setState(() {
                go = true;
              });
            }),
          ),
          if (go) MaterialPage(child: W2()),
        ],
        onPopPage: (route, result) {
          if (!route.didPop(result)) return false;
          go = false;
          return true;
        },
        observers: [HeroController()],
      ),
    );
  }
}

class W1 extends StatelessWidget {
  final void Function() onTapped;

  const W1({Key key, this.onTapped}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTapped ??
          () => context.read<MyModel>().go = true,
      child: Scaffold(
        appBar: AppBar(),
        body: Container(
          alignment: Alignment.topRight,
          child: Hero(
            tag: "topic",
            child: DefaultTextStyle(
              style: TextStyle(
                  fontSize: 40,
                  decoration: TextDecoration.none,
                  color: Colors.blue),
              child: Text(
                "data",
                style: TextStyle(fontSize: 40),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class W2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        alignment: Alignment.bottomLeft,
        child: Hero(
          tag: "topic",
          child: DefaultTextStyle(
            style: TextStyle(
                fontSize: 140,
                decoration: TextDecoration.none,
                color: Colors.blue),
            child: Text(
              "data",
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

好的，我寻找答案。

这是observers: [HeroController()],

每次状态更改时，孔树都会与HeroController一起重建。解决方案是在changeNotifier上方定义HeroController：

class HeroTestApp extends StatelessWidget {
  final heroC = HeroController();

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<MyModel>(
      create: (context) => MyModel(),
      builder: (context, _) {
        final state = context.watch<MyModel>();
        return MaterialApp(
          home: Navigator(
            pages: [
              MaterialPage(child: W1(onTapped: null)),
              if (state.go) MaterialPage(child: W2()),
            ],
            onPopPage: (route, result) {
              if (!route.didPop(result)) return false;
              state.go = false;
              return true;
            },
            observers: [heroC],
          ),
        );
      },
    );
  }
}

谢谢。

Flutter：英雄小部件，导航2.0和提供程序无法正常配合使用

1 个答案: