我在Flutter中编写代码时遇到问题。我单击任何图像，它会转到 ListPage，该图像显示在那里，但是当我单击另一个图像时，第一个图像消失。我希望当我单击图片时每张图片都显示并保留在 ListPage 中。我该怎么做？
现在我的列表页面代码：
import 'package:flutter/material.dart';
class MyListPage extends StatefulWidget {
final AssetImage image;
MyListPage({Key? key, required this.image}) : super(key: key);
@override
State<MyListPage> createState() => _MyListPageState();
}
class _MyListPageState extends State<MyListPage> {
late double screenWidth;
late double screenHeight;
@override
Widget build(BuildContext context) {
screenWidth = MediaQuery.of(context).size.width;
screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.white),
backgroundColor: Colors.black,
title: const Text(
'My List',
style: TextStyle(color: Colors.white),
),
),
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(0, 0, 0, 1.0),
Color.fromRGBO(69, 60, 60, 1.0),
])), // Tüm sayfa arka plan rengi
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(height: screenHeight * 0.04),
Align(
alignment: Alignment.topLeft,
child: Container(
margin: EdgeInsets.only(right: screenWidth * 0.03),
child: Image(
image: widget.image,
width: screenWidth * 0.2,
height: screenHeight * 0.2,
fit: BoxFit.cover,
),
),
),
const SizedBox(height: 450),
],
),
),
),
);
}
}
图片示例点击：
Container(
margin: EdgeInsets.symmetric(vertical: 10.0),
child: Center(
child: Container(
width: screenWidth * 0.8,
height: screenHeight * 0.6,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(screenWidth * 0.04),
border:
Border.all(color: Color.fromRGBO(69, 60, 60, 1.0)),
image: DecorationImage(
image:
AssetImage('assets/pics/beyond good and evil.jpg'),
fit: BoxFit.cover,
),
),
child: Container(
margin: EdgeInsets.only(top: screenHeight * 0.50),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
height: screenHeight * 0.05,
width: screenWidth * 0.33,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(screenWidth * 0.02),
color: Colors.white,
),
child: Row(
children: [
IconButton(
icon: Icon(Icons.visibility),
iconSize: screenWidth * 0.04,
color: Colors.black,
onPressed: () {},
),
Text(
'Read',
style: TextStyle(
color: Colors.black,
fontSize: screenWidth * 0.04,
),
),
],
),
),
Container(
height: screenHeight * 0.05,
width: screenWidth * 0.33,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(screenWidth * 0.02),
color: Colors.white,
),
child: Row(
children: [
IconButton(
icon: Icon(Icons.add),
iconSize: screenWidth * 0.05,
color: Colors.black,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MyListPage(
image: AssetImage(
'assets/pics/beyond good and evil.jpg'),
),
),
);
},
),
Text(
'Add List',
style: TextStyle(
color: Colors.black,
fontSize: screenWidth * 0.04,
),
),
],
),
),
],
),
),
),
),
),
为了确保即使单击另一张图像后，每张图片在 ListPage 上仍然可见，您需要在 ListPage 中维护一个图像列表并显示所有图像。以下是修改代码的方法：
修改 MyListPage 类以接受图像列表：
class MyListPage extends StatefulWidget {
final List<AssetImage> images;
MyListPage({Key? key, required this.images}) : super(key: key);
@override
State<MyListPage> createState() => _MyListPageState();
}
更新_MyListPageState以显示所有图像：
class _MyListPageState extends State<MyListPage> {
late double screenWidth;
late double screenHeight;
@override
Widget build(BuildContext context) {
screenWidth = MediaQuery.of(context).size.width;
screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.white),
backgroundColor: Colors.black,
title: const Text(
'My List',
style: TextStyle(color: Colors.white),
),
),
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(0, 0, 0, 1.0),
Color.fromRGBO(69, 60, 60, 1.0),
],
),
),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: widget.images.map((image) {
return Column(
children: [
SizedBox(height: screenHeight * 0.04),
Align(
alignment: Alignment.topLeft,
child: Container(
margin: EdgeInsets.only(right: screenWidth * 0.03),
child: Image(
image: image,
width: screenWidth * 0.2,
height: screenHeight * 0.2,
fit: BoxFit.cover,
),
),
),
const SizedBox(height: 450),
],
);
}).toList(),
),
),
),
);
}
}
修改你图片中的onPressed回调点击传递图片列表：
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MyListPage(
images: [
AssetImage('assets/pics/beyond good and evil.jpg'),
// Add more images here if needed
],
),
),
);
},
通过这些更改，每次导航到 ListPage 时，它都会显示传递给它的所有图像，而不是仅显示一张。即使点击另一张图像后，每张图像仍然可见。