ImagePicker 结果未显示在 PhotoView 中

Question

我是 Flutter 的新手，在过去一周左右的时间里取得了很好的进展。 我正在尝试使用 imagePicker 从我的画廊中选择一个图像。 从网上读取和测试代码，我能够毫无问题地引入图像。 但是，我希望能够使用 PhotoView 小部件的功能进行缩放和平移。 我试图将 imagePicker 结果的代码连接到 PhotoView 中……但没有运气。 任何帮助将不胜感激。 谢谢！

请在下面找到我的代码：

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'dart:io';
import 'package:image_picker/image_picker.dart';


void main() { runApp(MaterialApp (
  title: 'FaceJam Trial',


initialRoute: '/',

    routes: {

    '/': (context)=> StartScreen(),

      '/second': (context) => Horizontal(),

      '/third': (context) => Vertical(),
    },

)

);

}

class StartScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //appBar: AppBar (),
        bottomNavigationBar: BottomAppBar(

          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              IconButton(icon: Icon(Icons.border_horizontal,color: Colors.blue, size: 40,),
                onPressed: () {
                  Navigator.pushNamed(context, '/second');
                }
              ),
          IconButton(icon: Icon(Icons.border_vertical, color: Colors.blue,size: 40,),
            onPressed: () {
              Navigator.pushNamed(context, '/third');
            },

              )
            ],
          ),

        ) ,

      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/Splash.jpg"),
            fit: BoxFit.cover,
          )
    ),
      ),

        );

  }

}

class Horizontal extends StatefulWidget {
@override
_HorizontalState createState() => _HorizontalState();
}

class _HorizontalState extends State<Horizontal> {

  File imageA;
  File imageB;

  Future getImageA() async{
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);

     setState(() {
      imageA = image;
    });

  }

  Future getImageB() async {
    var images = await ImagePicker.pickImage(source: ImageSource.gallery);

    setState(() {
      imageB = images;
    });
  }

      @override
  Widget build(BuildContext context) {
    return Scaffold(
          body: Column(
              children: <Widget>[
                Expanded(
                    child: Stack (
                            children: <Widget>[
                              Center(
                                  child: PhotoView(
                                    enableRotation: true,
                                      imageProvider: AssetImage('imageA'),
                                  )
                                  ),

                              IconButton(
                                  icon:Icon(Icons.image,color: Colors.green, size: 40,),
                                  onPressed: getImageA
                              )
                            ],
                          )
                    ),
                    Expanded(
                        //child: Container(
                          child: ClipRect(
                                child: Stack (
                                  children: <Widget>[
                                    Center(


                                          child: PhotoView(
                                          enableRotation: true,
                                          imageProvider: AssetImage('imageB'),
                                          ),
                                           ),

                                    IconButton(
                                        icon:Icon(Icons.image,color: Colors.red, size: 40,),
                                        onPressed: getImageB
                                    )

                                  ],

                                )
                         ),
                         )
                       //  )
                        ]
                         ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.arrow_forward_ios),
      onPressed: () {
        Navigator.pop(context);

      },

    ),
    );

   }
}


class Vertical extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Row(
            children: <Widget>[
              Expanded(
                child: Container(
                  child: PhotoView(
                    enableRotation: true,
                    imageProvider: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
                  ),
                ),
              ),
              Expanded(
                  child: Container(
                    child: ClipRect(
                      child: PhotoView(
                        enableRotation: true,
                        imageProvider: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
                      ),
                    ),
                  )
              )
            ]
        ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_forward_ios),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
    );


  }
}

Answer 1

请记住， File实例是一个对象，其中包含可以执行操作的路径。 因此，在这种情况下，您只需要获取图像文件的路径即可在AssetImage小部件中使用它，请尝试以下代码：

Center( child: imageA != null ? PhotoView( enableRotation: true, imageProvider: AssetImage(imageA.path), ) : Container() )