Question

我使用Flutter小部件之一显示了图片

Image.network(....);

我想添加一些功能，点击图像后，我可以全屏模式显示该图像。怎么做？

Answer 1

您说您想要这个flutter cookbook中的东西吗？

double Convert::convertmVtoK(double value)
{
    auto it = lower_bound(mV.begin(), mV.end(), value);

    if (it == mV.begin())
    {
        it = mV.begin();
    }
    else
    {
        --it;
    }

    auto jt = upper_bound(mV.begin(), mV.end(), value), out = it;

    if (it == mV.end() || jt != mV.end() && value - *it > *jt - value)
    {
    out = jt;
    }

    cout<<"This is conversion mV to K"<<" "<< *out;
}

您可以使用cache_network_image包来显示缓存的图像，而无需再次下载。

import 'package:flutter/material.dart';

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

class HeroApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image/Detail Demo',
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
          ),
        ),
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (_) {
            return DetailScreen();
          }));
        },
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
            ),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}

我的最终版本（使用全屏显示）：

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

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

class HeroApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image/Detail Demo',
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
        child: Hero(
          tag: 'imageHero',
          child: CachedNetworkImage(
            imageUrl:  'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
            placeholder: new CircularProgressIndicator(),
            errorWidget: new Icon(Icons.error),
          )
        ),
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (_) {
            return DetailScreen();
          }));
        },
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: CachedNetworkImage(
              imageUrl:  'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
              placeholder: new CircularProgressIndicator(),
              errorWidget: new Icon(Icons.error),
            ),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}

将数据从主页传递到详细信息页面

为完成我的回答，我添加了一些代码来说明如何将图像URL从主页传递到详细信息页面。

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/services.dart';

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

class HeroApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image/Detail Demo',
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
        child: Hero(
            tag: 'imageHero',
            child: CachedNetworkImage(
              imageUrl:
                  'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
              placeholder: new CircularProgressIndicator(),
              errorWidget: new Icon(Icons.error),
            )),
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (_) {
            return DetailScreen();
          }));
        },
      ),
    );
  }
}

class DetailScreen extends StatefulWidget {
  @override
  _DetailScreenState createState() => _DetailScreenState();
}

class _DetailScreenState extends State<DetailScreen> {
  @override
  initState() {
    SystemChrome.setEnabledSystemUIOverlays([]);
    super.initState();
  }

  @override
  void dispose() {
    //SystemChrome.restoreSystemUIOverlays();
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: CachedNetworkImage(
              imageUrl:
                  'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
              placeholder: new CircularProgressIndicator(),
              errorWidget: new Icon(Icons.error),
            ),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}

更新

要在图像外部弹出点击，请在import 'package:flutter/material.dart'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/services.dart'; void main() => runApp(HeroApp()); class HeroApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Image/Detail Demo', home: MainScreen(), ); } } class MainScreen extends StatefulWidget { @override _MainScreenState createState() => _MainScreenState(); } class _MainScreenState extends State<MainScreen> { var _url = [ 'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg', 'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true' ]; var _tag = ['imageHero', 'imageHero2']; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Main Screen'), ), body: ListView( children: <Widget>[ GestureDetector( child: Hero( tag: _tag[0], child: CachedNetworkImage( imageUrl: _url[0], placeholder: Center(child: Container(width: 32, height: 32,child: new CircularProgressIndicator())), errorWidget: new Icon(Icons.error), )), onTap: () { Navigator.push(context, MaterialPageRoute(builder: (_) { return DetailScreen(tag: _tag[0], url: _url[0]); })); }, ), GestureDetector( child: Hero( tag: _tag[1], child: CachedNetworkImage( imageUrl: _url[1], placeholder: Center(child: Container(width: 32, height: 32,child: new CircularProgressIndicator())), errorWidget: new Icon(Icons.error), )), onTap: () { Navigator.push(context, MaterialPageRoute(builder: (_) { return DetailScreen(tag: _tag[1], url: _url[1]); })); }, ), ], ), ); } } class DetailScreen extends StatefulWidget { final String tag; final String url; DetailScreen({Key key, @required this.tag, @required this.url}) : assert(tag != null), assert(url != null), super(key: key); @override _DetailScreenState createState() => _DetailScreenState(); } class _DetailScreenState extends State<DetailScreen> { @override initState() { SystemChrome.setEnabledSystemUIOverlays([]); super.initState(); } @override void dispose() { //SystemChrome.restoreSystemUIOverlays(); SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( body: GestureDetector( child: Center( child: Hero( tag: widget.tag, child: CachedNetworkImage( imageUrl: widget.url, placeholder: Center(child: Container(width: 32, height: 32,child: new CircularProgressIndicator())), errorWidget: new Icon(Icons.error), ), ), ), onTap: () { Navigator.pop(context); }, ), ); } }小部件中将GestureDetector移出。

Detail

Answer 2

您可以使用此代码全屏显示图像！

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://picsum.photos/250?image=9',
            ),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}

Answer 3

我只是找到了一个库，其中包含您正在寻找的内容和动画英雄效果。 full_screen_image 来自 furkan.kayali@bil.omu.edu.tr

FullScreenWidget(
    child: Hero(
      tag: "customTag",
      child: ClipRRect(
        borderRadius: BorderRadius.circular(16),
        child: Image.asset(
          "assets/image2.jpg",
          fit: BoxFit.cover,
        ),
      ),
    ),
  );

在Flutter中在onTap上显示全屏图像

3 个答案: