问题描述
我已将提供程序包添加到我的应用程序中，其中有两个屏幕。当用户单击应用程序上的小图像时，它将在另一个屏幕上更改主背景图像。我已经在两个屏幕上都调用了提供程序和类，但是它只是没有在Positioned.fill内部返回“ myValue”。
具有需要更改的背景图片的主页屏幕：
@H_502_4@import 'package:Flutter/material.dart';
import 'package:Flutter_app_background/small_images.dart';
import 'package:Flutter/cupertino.dart';
import 'package:provider/provider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider<MyModel>(
create: (context) => MyModel(),child: MaterialApp(
title: 'Title',home: HomePage(),),);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,appBar: AppBar(
title: Text('Background Image',style: TextStyle(
color: Colors.black,fontSize: 16,fontWeight: FontWeight.bold),iconTheme: IconThemeData(color: Colors.white),actions: <Widget>[
IconButton(
icon: Icon(Icons.settings,color: Colors.black,onpressed: () {
Navigator.push(
context,MaterialPageRoute(builder: (context) => SmallImages()),);
},],backgroundColor: Colors.transparent,elevation: 0.0,body: Stack(
children: <Widget>
[
Positioned.fill(
child: GestureDetector(
child: Consumer<MyModel>(
builder: (context,myModel,child) {
return myModel.bgImage;
// return myValue;
},);
}
}
class MyModel extends ChangeNotifier {
Image bgImage = Image.asset('images/background_image.jpeg',fit: BoxFit.fill);
}
“小图像”屏幕，用户点击小图像可更改主页中的背景。
@H_502_4@import 'package:Flutter/material.dart';
import 'package:Flutter_app_background/main.dart';
import 'package:provider/provider.dart';
class SmallImages extends StatefulWidget {
static int tappedGestureDetector = 1;
@override
_SmallImagesstate createState() => _SmallImagesstate();
}
class _SmallImagesstate extends State<SmallImages> {
List<bool> isSelected;
void initState() {
isSelected = [true,false,false];
super.initState();
}
@override
Widget build(BuildContext context) {
final myModel = Provider.of<MyModel>(context,listen:true); //default for listen is `true`
return Scaffold(
appBar: AppBar(
title: Text('Small Image',style: TextStyle(
color: Colors.black,actions: <Widget>[
IconButton(
icon: Icon(Icons.arrow_left,onpressed: () {
Navigator.pop(
context,MaterialPageRoute(builder: (context) => HomePage()),);
},body: Material(
child: GestureDetector(
child: MaterialApp(
builder: (context,snapshot) {
return GridView.count(
crossAxisCount: 1,childAspectRatio: 1.0,padding: const EdgeInsets.all(4.0),mainAxisspacing: 0.0,crossAxisspacing: 0.0,children: [
GridView(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,childAspectRatio: MediaQuery
.of(context)
.size
.width /
(MediaQuery
.of(context)
.size
.height / 2),children: [
GestureDetector(
onTap: () {
setState(() {
SmallImages.tappedGestureDetector = 1;
});
myModel.bgImage = Image.asset('images/iceland_background.jpg');
},child: Container(
height: 100,width: 107,decoration: Boxdecoration(border: SmallImages
.tappedGestureDetector == 1
? Border.all(
color: Color(0xff2244C7),width: 1.0)
: Border
.all(color: Colors.transparent,child: Image.asset(
'images/nightsky_image.png',Consumer<MyModel>(
builder: (context,child) {
return GestureDetector(
onTap: () {
setState(() {
SmallImages.tappedGestureDetector = 2;
}); // <-- replaced 'tapped' and 'other'
},child: Container(
height: 100,decoration: Boxdecoration(border: SmallImages
.tappedGestureDetector == 2
? Border.all(
color: Color(0xff2244C7),width: 1.0)
: Border
.all(color: Colors.transparent,child: Image.asset(
'images/own_image.png',);
},child) {
return GestureDetector(
onTap: () {
setState(() {
SmallImages.tappedGestureDetector = 3;
}); // <-- replaced 'tapped' and 'other'
},decoration: Boxdecoration(border: SmallImages
.tappedGestureDetector == 3
? Border.all(
color: Color(0xff2244C7),child: Image.asset(
'images/iceland_image.png',].toList(),);
}),);
}
}
解决方法
您应使用提供程序包装重要应用程序：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Provider<MyModel>(
create: (context) => MyModel(),child: MaterialApp(
title: 'Title',home: HomePage(),);
)
}
}
如果您希望它在MyModel更改时重建一些小部件，则应使用ChangeNotifer扩展MyModel，如下所示：
class MyModel extends ChangeNotifier{
final bgImage = //someimage
，而不是MaterialApp周围的提供者，您应该像这样使用ChangeNotifierProvider：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider<MyModel>(
create: (context) => MyModel(),);
)
}
}
此后，您应在小部件内添加提供程序，如下所示：
@override
Widget build(BuildContext context) {
final mymodel = Provider.of<MyModel>(context); // injecting the provider
return Container ( .....
您可以像这样在容器内使用背景图片，
color:mymodel.bgImage
更改mymodel.bgImage小部件后，它将自动重建。
如果您打算在widget内重建特定的widget tree，则可以在这种情况下删除final mymodel = Provider.of<MyModel>(context);这样的注入，并用{包裹该特定的widget {1}}像这样：
Consumer<MyModel>如果您不需要在容器下使用子级和上下文，则可以这样做：
Container(
child:Consumer<MyModel>(
builder: (context,myModel,child) {
return Text("${myModel.text}"); // supposing that `text` is inside the `MyModel`
},)
更改child:Consumer<MyModel>(
builder: (_,_) {
的示例如下：
myModel.bgImage在按住按钮的同时更改我的模型的值将重建任何注入FlatButton(
onPressed: (val){
myModel.image = otherImage // changeing the value of my model while pressing on the button
}
)
并将提供者MyModel Provider属性设置为listen的小部件，（listen属性设置为{{ 1}}）
true属性的示例：
true