扑出糟糕的英雄动画

Question

我在2个屏幕之间实现了Hero动画。问题在于它没有正确显示动画。在图片中将黄线置于单词下方

Example of what I mean

  child: InkWell(
    onTap: (){
      Navigator.push(context, MaterialPageRoute(builder: (context) => CityScreen(widget.city)));
    },
    child: Row(
      children: [
        Padding(
          padding: const EdgeInsets.all(15.0),
          child: Hero(
            tag: widget.city.name + 'img',
            child: Container(
              child: Image(
                width: 100,
                height: 100,
                image: AssetImage('images/oussama.jpg'),
              ),
            ),
          ),
        ),

另一个屏幕是：

  child: Scaffold(
    body: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            expandedHeight: 300.0,
            floating: false,
            pinned: true,
            flexibleSpace: Center(
              child: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Hero(
                    tag: widget.city.name,
                    child: Container(
                      child: Text(widget.city.name,
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 30,
                            fontWeight: FontWeight.bold,
                          ),
                      ),
                    ),
                  ),
                  background: Hero(
                    tag: widget.city.name + 'img',
                    child: Container(
                      child: Image(
                        image: AssetImage('images/oussama.jpg'),
                      ),
                    ),
                  ),
              ),
            ),
          ),
        ];
      },

Answer 1

尝试将根窗口小部件包装在脚手架中。