【问题标题】:Showing more than one photo taken from the camera显示多张从相机拍摄的照片
【发布时间】:2019-08-10 02:43:55
【问题描述】:

我正在使用颤振的“image_picker”插件来拍照并在我的应用程序上显示。我的问题是我需要展示不止一张图片。因此,如果您拍摄第二张照片,它应该显示在前一张的旁边。

到目前为止,我已经尝试将我拍摄的图像保存到一个列表中,这样我就可以通过构建器中的“_imageList[index]”来显示它们

 List<File> _imageList = []; 

  void _getImage(File _image) {
    setState(() {
      _imageList.add(_image);
    });
  }


  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      body: ListView(
        padding: EdgeInsets.only(top: 70.0),
        children: [Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width * 0.7,
                  child: TextField(
                  textAlign: TextAlign.center, 
                  style: TextStyle(
                    color: Colors.white
                  ),
                  decoration: InputDecoration(
                    hintText: "Ingrese título opcional",
                    hintStyle: TextStyle(color: Colors.red[200]),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Theme.of(context).accentColor)
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Theme.of(context).accentColor)
                      ),  
                    )
                  ),
                )
              ],
            ),
            Container(
              padding: EdgeInsets.all(20.0),
              child: ListView.builder(
                itemCount: _imageList.length,
                itemBuilder: (context, index) {
                  return Image.file(_imageList[index]);
                },
              ),
            ),
        ],)]
        ,),
        bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.camera_alt),
                color: Theme.of(context).primaryColor,
                onPressed: () async {
                  File _image = await ImagePicker.pickImage(source: ImageSource.gallery);
                  _getImage(_image);
                },
              ),
              IconButton(
                icon: Icon(Icons.videocam),
                color: Theme.of(context).primaryColor,
                onPressed: () {
                },
              ),
              IconButton(
                icon: Icon(Icons.mic),
                color: Theme.of(context).primaryColor,
                onPressed: () {
                },
              ),
              IconButton(
                icon: Icon(Icons.create),
                color: Theme.of(context).primaryColor,
                onPressed: () {
                },
              ),
            ],
          ),
        ),
    );
  }
}

请帮忙,我真的不知道还能做什么

它没有显示错误,它让我拍照,但它们不显示

【问题讨论】:

    标签: flutter dart


    【解决方案1】:
    class _MyHomePageState extends State<MyHomePage> {
    
      List<File> _imageList = [];
    
    
      void _addImage(File _image) {
        setState(() {
          _imageList.add(_image);
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Column(
            children: <Widget>[
              MaterialButton(
                child: Text("Add Image:  ${_imageList.length}"),
                onPressed: () async {
                  var _image =
                      await ImagePicker.pickImage(source: ImageSource.gallery);
                  print(_image.path);
                  _addImage(_image);
                },
              ),
              Expanded(
                child: ListView.builder(
                    itemCount: _imageList.length,
                    itemBuilder: (context, index) {
                      return InkWell(
                          onTap: () {
                            return null;
                          },
                          child: Card(
                            child: Container(
                              child: Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Text(_imageList[index].path),
                              ),
                            ),
                          ));
                    }),
              ),
            ],
          ),
        );
      }
    }
    

    【讨论】:

    • 您能否解释一下为什么 mi 代码不起作用?谢谢!!
    猜你喜欢
    • 1970-01-01
    • 2013-11-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-20
    • 2014-04-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多