[英]How to change images using the Provider Package in Flutter
問題:我單擊了“做某事”按鈕,但圖像似乎無法從“你好”變為“再見”。 回來的錯誤是
“錯誤:無法將參數類型“圖像”分配給參數類型“字符串”。
是否可以將字符串更改為圖像,以便讀取圖像並將其顯示在屏幕上?
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);
}
}
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()
函數來回更改圖像的功能
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.