我怎样才能保持两个图像在一个屏幕上?

Question

如何将屏幕分成两个不同的部分。我正在学习过滤器，我编写了这个代码我想从服务器添加图像当我第一次放1号或2号图片时，没有问题但是当选择第二张图片时，第一张图片将被删除。我想是因为它刷新了页面(重建)我怎样才能在一个屏幕上保持两个图像?最好的方法是什么?

谢谢

将屏幕分成两部分

import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:lifetb/constants/my_colors.dart';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';

class BeforeAfter2 extends StatefulWidget {
const BeforeAfter2({
Key? key,
this.imageSelected1,
this.imageSelected2,
}) : super(key: key);
final imageSelected1;
final imageSelected2;
@override
_BeforeAfter2State createState() => _BeforeAfter2State();
}
/// change it to Cata
var imageSelected1;
var imageSelected2;

var imageBody = true;
var id;
var username;
var email;

getPref() async {
SharedPreferences preferences = await SharedPreferences.getInstance();
username = preferences.getString("username");
id = preferences.getString("id");
email = preferences.getString("email");
if ( id == null) {
print("empty");
}
}

Future getData() async {
getPref();
if ( id == null) {
print("empty 2");
}
var url = "http://10.0.2.2/641984.php";
var data = {"user_id": "$id"};
var response = await http.post(Uri.parse(url), body: data);
var responsebody = jsonDecode(response.body);
return responsebody;
}
class _BeforeAfter2State extends State<BeforeAfter2> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: [
Expanded(
flex: 1,
child: SizedBox(
height: double.infinity,
width: double.infinity,
child: widget.imageSelected1 == null
? addImage(true,true)
: showCata()
),
),
Expanded(
flex: 1,
child: SizedBox(
height: double.infinity,
width: double.infinity,
child: widget.imageSelected2 == null
? addImage(false,true)
: showCata1()
),
),
],
),
));
}
}

addImage(addText, goToAdd) {
return Column(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
addText ? Text("Add 1 Photo") : Text("Add 2 Photo"),
SizedBox(height: 26),
Container(
alignment: Alignment.center,
child: FloatingActionButton(
heroTag: null,
child: Icon(
Icons.add,
color: white,
size: 45,
),
onPressed: () {
goToAdd
? showCata()
: showCata1();
},
)),
],
),
],
);
}
showCata(){
return  FutureBuilder(
future: getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Loading...'),
Center(child: CircularProgressIndicator())
],
);
} else if (snapshot.data.isEmpty) {
return Padding(
padding: EdgeInsets.all(15),
child: Text("You don't Have any Photo")
);
}
return GridView.builder(
// shrinkWrap: true,
itemCount: snapshot.data.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
// crossAxisSpacing: 10
),
itemBuilder: (context, i) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: InkWell(
onTap: () {
Navigator.of(context)
.pushReplacement(MaterialPageRoute(builder: (context) {
return BeforeAfter2(
imageSelected1: snapshot.data[i]["post_image"],
);
}));
},
child: Container(
margin: EdgeInsets.only(top: 10, left: 10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.deepPurple.shade500,
width: 2),
borderRadius:
BorderRadius.all(Radius.circular(35)),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"http://10.0.2.2/upload/" +
snapshot.data[i]["post_image"]),
)),
),
),
);
},
);
},
);
}
showCata1(){
return  FutureBuilder(
future: getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Loading...'),
Center(child: CircularProgressIndicator())
],
);
} else if (snapshot.data.isEmpty) {
return Padding(
padding: EdgeInsets.all(15),
child: Text("You don't Have any Photo")
);
}
return GridView.builder(
// shrinkWrap: true,
itemCount: snapshot.data.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
// crossAxisSpacing: 10
),
itemBuilder: (context, i) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: InkWell(
onTap: () {
Navigator.of(context)
.pushReplacement(MaterialPageRoute(builder: (context) {
return BeforeAfter2(
imageSelected2: snapshot.data[i]["post_image"],

);
}));
},
child: Container(
margin: EdgeInsets.only(top: 10, left: 10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.deepPurple.shade500,
width: 2),
borderRadius:
BorderRadius.all(Radius.circular(35)),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"http://10.0.2.2/upload/" +
snapshot.data[i]["post_image"]),
)),
),
),
);
},
);
},
);
}

Answer 1

删除SizedBox()s并将SafeArea改为child

Answer 2

class _BeforeAfter2State extends State<BeforeAfter2> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: [
Expanded(
flex: 1,

child: widget.imageSelected1 == null
? addImage(true,true)
: showCata()

),
Expanded(
flex: 1,

child: widget.imageSelected2 == null
? addImage(false,true)
: showCata1()

),
],
),
));
}
}

addImage(addText, goToAdd) {
return Column(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
addText ? Text("Add 1 Photo") : Text("Add 2 Photo"),
SizedBox(height: 26),
Container(
alignment: Alignment.center,
child: FloatingActionButton(
heroTag: null,
child: Icon(
Icons.add,
color: white,
size: 45,
),
onPressed: () {
goToAdd
? showCata()
: showCata1();
},
)),
],
),
],
);
}
showCata(){
return  FutureBuilder(
future: getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Loading...'),
Center(child: CircularProgressIndicator())
],
);
} else if (snapshot.data.isEmpty) {
return Padding(
padding: EdgeInsets.all(15),
child: Text("You don't Have any Photo")
);
}
return GridView.builder(
// shrinkWrap: true,
itemCount: snapshot.data.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
// crossAxisSpacing: 10
),
itemBuilder: (context, i) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: InkWell(
onTap: () {
Navigator.of(context)
.pushReplacement(MaterialPageRoute(builder: (context) {
return BeforeAfter2(
imageSelected1: snapshot.data[i]["post_image"],
);
}));
},
child: Container(
margin: EdgeInsets.only(top: 10, left: 10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.deepPurple.shade500,
width: 2),
borderRadius:
BorderRadius.all(Radius.circular(35)),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"http://10.0.2.2/upload/" +
snapshot.data[i]["post_image"]),
)),
),
),
);
},
);
},
);
}
showCata1(){
return  FutureBuilder(
future: getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Loading...'),
Center(child: CircularProgressIndicator())
],
);
} else if (snapshot.data.isEmpty) {
return Padding(
padding: EdgeInsets.all(15),
child: Text("You don't Have any Photo")
);
}
return GridView.builder(
// shrinkWrap: true,
itemCount: snapshot.data.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
// crossAxisSpacing: 10
),
itemBuilder: (context, i) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: InkWell(
onTap: () {
Navigator.of(context)
.pushReplacement(MaterialPageRoute(builder: (context) {
return BeforeAfter2(
imageSelected2: snapshot.data[i]["post_image"],

);
}));
},
child: Container(
margin: EdgeInsets.only(top: 10, left: 10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.deepPurple.shade500,
width: 2),
borderRadius:
BorderRadius.all(Radius.circular(35)),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"http://10.0.2.2/upload/" +
snapshot.data[i]["post_image"]),
)),
),
),
);
},
);
},
);
}