flutter共享元素

共享元素 1553662512307.gif

效果图

通过Hero widget设置tag可实现共享元素

 Hero(
                  tag: "aaa",
                  child: Image.network(
                    "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1745875165,3906740002&fm=26&gp=0.jpg",
                    width: 120.0,
                    height: 100.0,
                  )),

对应另一个界面也是同样如此
全部代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
//          RaisedButton(onPressed: ()=>Navigator.of(context).push(MaterialPageRoute(builder: (_)=>Tows())),child: Text("跳转"),),
          InkWell(
            onTap: () => Navigator.push(context,MaterialPageRoute(builder: (_) => Tows())),
            child: Column(children: <Widget>[
              Hero(
                  tag: "aaa",
                  child: Image.network(
                    "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1745875165,3906740002&fm=26&gp=0.jpg",
                    width: 120.0,
                    height: 100.0,
                  )),
              Hero(
                  tag: "bbb",
                  child: Image.network(
                    "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2236278227,418384181&fm=26&gp=0.jpg",
                    width: 120.0,
                    height: 100.0,
                  )),
              Hero(
                  tag: "ccc",
                  child: Image.network(
                    "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3170338295,3308067375&fm=26&gp=0.jpg",
                    width: 120.0,
                    height: 100.0,
                  ))
            ],),
          ),
        ],
      ),
    );
  }
}

class Tows extends StatefulWidget {
  @override
  _TowsState createState() => _TowsState();
}

class _TowsState extends State<Tows> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Row(children: <Widget>[Hero(
          tag: "aaa",
          child: Container(
            child: Image.network(
              "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1745875165,3906740002&fm=26&gp=0.jpg",
              width: 80.0,
              height: 60.0,
            ),
          )),Hero(
          tag: "bbb",
          child: Container(
            child: Image.network(
              "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2236278227,418384181&fm=26&gp=0.jpg",
              width: 80.0,
              height: 60.0,
            ),
          )),Hero(
          tag: "ccc",
          child: Container(
            child: Image.network(
              "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3170338295,3308067375&fm=26&gp=0.jpg",
              width: 80.0,
              height: 60.0,
            ),
          ))],),
    );
  }
}