Flutter Image Widget不会在更改状态上更新

我正在使用滑块(如Instagram)创建图像编辑器应用程序,并且正在使用库image / image.dart。 问题在于,一旦移动滑块,它就会更新图像,但是只是在那个时候,如果再次移动它,它就不会更新。

我已经按照预期设置了所有内容,setState()函数随颤动地询问,但我不知道为什么它不会再次更新。

import 'dart:io';
import 'dart:ui';
import 'package:flutter/material.dart';

import 'package:image/image.dart' as br;
import 'package:path_provider/path_provider.dart';
import 'package:image_picker/image_picker.dart';

class ImageManager extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _ImageManagerState();
  }
}

class _ImageManagerState extends State<ImageManager> {
  File imageFile;
  br.Image image;
  Image _imageWidget;

  Future<String> get _localPath async {
    final directory = await getapplicationDocumentsDirectory();

    return directory.path;
  }

  // get tmp file
  Future<File> get _localFile async {
    final path = await _localPath;
    return File('$path/tmp.jpg');
  }

  // pick image on button click
  Future<void> _pickImage(ImageSource source) async{
    File selectedFile = await ImagePicker.pickImage(source: source);
    br.Image selectedImage;
    if (selectedFile != null){
      selectedImage = br.decodeImage(selectedFile.readAsBytesSync());
      br.grayscale(selectedImage);

      selectedFile.writeAsBytesSync(br.encodeJpg(selectedImage));
    }

    setState((){
      image = selectedImage;
      imageFile = selectedFile;
      _imageWidget = Image.file(imageFile);
    });
  }

  // MAIN PROBLEM,UPDATING THE CONTRAST WILL ONLY DO IT ONCE
  Future<void> updateContrast(value) async{
    File contrastFile = imageFile;
    br.Image contrast = br.decodeImage(contrastFile.readAsBytesSync());
    contrast = br.adjustColor(contrast,contrast: value);
    contrastFile.writeAsBytesSync(br.encodeJpg(contrast));

    // Save the thumbnail as a jpg.
    File path = await _localFile;
    path.writeAsBytesSync(br.encodeJpg(contrast));
    setState(() {
      image = contrast;
      imageFile = contrastFile;
      if(path != null){
        _imageWidget = Image.file(path);
        print(value);
      }

    });
  }

  // 
  Widget _buildImage(BuildContext context){
    return Column(
      children: [
        Container(
          width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.width,child: _imageWidget,),Column(
          children: [
            Container(
              padding: const EdgeInsets.only(left: 8,right: 8),child: Column(
                children: <Widget>[
                  // contrast
                  Text("Contraste"),Padding(
                    padding: const EdgeInsets.only(bottom: 4.0,top: 0.0),child: Container(
                      child: Slider(
                        min: 0.0,max: 1.0,divisions: 100,value: _contrast,activeColor: Colors.blue[500],inactiveColor: Colors.blue[50],label: "${(_contrast *100).round()}",onChanged: (value) async{
                          changeContrast(value);
                        },onChangeEnd: (value) async{
                          updateContrast(value);
                        },],]
    );
  }


我希望每次更换滑块时图像都会更新。

qq345289212 回答:Flutter Image Widget不会在更改状态上更新

imageCache.clear()将完成这项工作。

我也无法重新加载图像以将其保存在本地屏幕上。通过调试,我发现实际上已删除了旧图像,并在其中复制了新图像,但是屏幕上没有任何变化。以下是您需要的代码。

因此,在Scaffold的主体中,我制作了一个FutureBuilder,它调用了另一个函数reload(),然后该函数加载文件并返回图像。

FutureBuilder(
future: reload(),builder: (BuildContext context,AsyncSnapshot<dynamic> snapshot) {
    if(snapshot.connectionState == ConnectionState.done){
        return snapshot.data;
    }  
    else{
        return CircularProgressIndicator();
    }
},),

这是reload()函数:

reload() async {
String path = "path of your image";
File profileImage = File("$path/name.jpg");

if(profileImage.existsSync() == false){
  return Text("File Not Found");
}
else{
  imageCache.clear();
  return Image.file(profileImage);
}
}

我检查了Flutter的github和jamesncl has already suggested this

,

我解决了这个问题,这对我来说很奇怪,但是如果有人可以解释,我将不胜感激。

Future<void> adjustImage() async{
  File toAdjustFile = imageFile;
  br.Image toAdjust = br.decodeImage(toAdjustFile.readAsBytesSync());
  toAdjust = br.adjustColor(toAdjust,contrast: _contrast,brightness: _brightness,exposure: _exposure);
  setState(() {
    _imageWidget = Image.memory(br.encodeJpg(toAdjust));
  });
}

我重构了函数并将小部件设置为另一个构造函数Image.memory()

本文链接:https://www.f2er.com/3127086.html

大家都在问