如何使用 Flutter 中的 Provider 包更改图像答案

【问题标题】：How to change images using the Provider Package in Flutter如何使用 Flutter 中的 Provider 包更改图像
【发布时间】：2021-02-05 06:41:07
【问题描述】：

问题：我单击“做某事”按钮，但图像似乎无法从“你好”变为“再见”。返回的错误是

'错误：参数类型'Image'不能分配给参数类型'String'。

'Image' 来自'package:flutter/src/widgets/image.dart' ('../../Development/flutter/packages/flutter/lib/src/widgets/image.dart')。 return Image.asset(myValue);'

是否可以将字符串更改为图像，以便读取图像并将其显示在屏幕上？

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Provider<MyModel>(//                              <--- Provider
      create: (context) => MyModel(),
      child: Consumer<MyModel>( //                           <--- MyModel Consumer
          builder: (context, myModel, child) {
            return ValueListenableProvider<Image>.value( // <--- ValueListenableProvider
              value: myModel.someValue,
              child: MaterialApp(
                home: Scaffold(
                  appBar: AppBar(title: Text('My App')),
                  body: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[

                      Flexible(
                        child: Container(
                            padding: const EdgeInsets.all(20),
                            color: Colors.green[200],
                            child: Consumer<MyModel>( //       <--- Consumer
                              builder: (context, myModel, child) {
                                return RaisedButton(
                                  child: Text('Do something'),
                                  onPressed: (){
                                    myModel.doSomething();
                                  },
                                );
                              },
                            )
                        ),
                      ),

                      Flexible(
                        child: Container(
                          padding: const EdgeInsets.all(35),
                          color: Colors.blue[200],
                          child: Consumer<Image>(//           <--- String Consumer
                            builder: (context, myValue, child) {
                              return Image.asset(myValue);
                            },
                          ),
                        ),
                      ),

                    ],
                  ),
                ),
              ),
            );
          }),
    );
  }
}

class MyModel { //                                             <--- MyModel
  ValueNotifier<Image> someValue = ValueNotifier(Image.asset('images/hello.png')); // <--- ValueNotifier
  void doSomething() {
    someValue.value = Image.asset('images/goodbye.png');
    print(someValue.value);
  }
}

【问题讨论】：

标签： image flutter state provider flutter-onpressed

【解决方案1】：

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

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Provider<MyModel>(
      //                              <--- Provider
      create: (context) => MyModel(),
      child:
          Consumer<MyModel>(//                           <--- MyModel Consumer
              builder: (context, myModel, child) {
        return ValueListenableProvider<Image>.value(
          // <--- ValueListenableProvider
          value: myModel.someValue,
          child: MaterialApp(
            home: Scaffold(
              appBar: AppBar(title: Text('My App')),
              body: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Flexible(
                    child: Container(
                        padding: const EdgeInsets.all(20),
                        color: Colors.green[200],
                        child: Consumer<MyModel>(
                          //       <--- Consumer
                          builder: (context, myModel, child) {
                            return RaisedButton(
                              child: Text('Do something'),
                              onPressed: () {
                                myModel.doSomething();
                              },
                            );
                          },
                        )),
                  ),
                  Flexible(
                    child: Container(
                      padding: const EdgeInsets.all(35),
                      color: Colors.blue[200],
                      child: Consumer<Image>(
                        //           <--- String Consumer
                        builder: (context, myValue, child) {
                          return myValue; //                         <--- **Change** 
                        },
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }),
    );
  }
}

class MyModel {
  //                                             <--- MyModel
  ValueNotifier<Image> someValue =
      ValueNotifier(Image.asset('images/hello.png')); // <--- ValueNotifier
  void doSomething() { //                         <--- **Change** 
    if (someValue.value.toString() ==
        Image.asset('images/hello.png').toString()) {
      someValue.value = Image.asset('images/goodbye.png');
    } else if (someValue.value.toString() ==
        Image.asset('images/goodbye.png').toString()) {
      someValue.value = Image.asset('images/hello.png');
    }
  }
}

myValue 已经是一张图片，因此您无需从Image.asset 再次打开它还添加了为您的doSomething() 功能来回更改图片的功能

【讨论】：