我的问题是这样的,我想调用图像和描述,但我有超过200张图像,我不知道该怎么做。我已经调用了图像,但是如何添加这些图像的描述以及如何调用描述?我知道这些代码很长,但我还是想展示它,因为为了让你更好地理解。
总结:我想为每张图片调用不同的描述。
此主页的横截面
slide('World of Classics', [
'peter pan in kensington gardens.jpg',
'peter pan.jpg',
'odysey.jpg',
'sherlock holmes.jpg',
'the idiot.jpg',
'anna karenina.jpg',
'Around the World in 80 Days.jpg',
'art of war.jpg',
'robinson crouse.jpg',
'Gullivers travel.jpg',
]),
slide('Full of Love Novels', [
'aski memnu.jpg',
'ruh adam.jpg',
'mor salkimli ev.jpg',
'ask batagi.jpg',
'aydakı kadın.jpg',
'emma.jpg',
'kurk mantolu madonna.jpg',
'Love and Mr Lewisham.jpg',
'madame bovary.jpg',
'simdi sevisme vakti.jpg',
// orther images
]),
],
),
),
),
);
}
Widget slide(String info, List<String> imageList) {
return Container(
margin: EdgeInsets.fromLTRB(
screenWidth * 0.05,
screenHeight * 0.02,
screenWidth * 0.05,
0.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
info,
style: TextStyle(
color: Colors.white,
fontSize: screenWidth * 0.04,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8.0),
Container(
height: screenHeight * 0.2,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: imageList.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
DetailsPage(imageName: imageList[index]),
),
);
},
child: Container(
width: screenWidth * 0.20, // box lenght
height: screenHeight * 0.1,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0),
image: DecorationImage(
image: AssetImage('assets/pics/${imageList[index]}'),
fit: BoxFit.cover,
),
),
),
);
},
),
),
],
),
);
}
此详细信息页面的横截面
class DetailsPage extends StatefulWidget {
final String imageName;
const DetailsPage({
Key? key,
required this.imageName,
}) : super(key: key);
@override
State<DetailsPage> createState() => _DetailsPageState();
}
class _DetailsPageState extends State<DetailsPage> {
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(
body: SingleChildScrollView(
child: 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: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(
top: screenHeight * 0.04,
left: screenWidth * 0.05,
right: screenWidth * 0.03),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.white,
iconSize: screenWidth * 0.06,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomePage()));
},
)
],
),
),
Container(
height: screenHeight * 0.5,
color: Colors.white,
child: Align(
alignment: Alignment.center,
child: SizedBox(
width: screenWidth, // Image size settings
child: Image.asset(
'assets/pics/${widget.imageName}', // here is images
fit: BoxFit.fill,
),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
'data', // here is descriptions
style: TextStyle(
fontSize: screenWidth * 0.1 / 3, color: Colors.grey),
),
),
我想用 Flutter 弹出图像描述,但我做不到,我尝试了地图和列表,但没有成功。
您希望在主页页面上为每个图像显示不同的描述。为此,您需要以某种方式管理与幻灯片小部件中 imageList 参数中的图像相对应的描述。
下面是在 HomePage 类的幻灯片小部件中执行此功能的代码示例。描述保存在基于 imageList 列表的字典中。该字典将图像名称作为键并将描述存储为值。然后使用详细信息页面中的这些描述将其显示在详细信息页面中。
可能的问题:如果您收到这样的警告“参数类型‘字符串?’”无法分配给参数类型“String”。'
解决方案:出现这个错误的原因是DetailsPage的imageName和description参数是String类型,但是在哪里调用这些参数却是String类型?字符串? type 是“可空”类型,这意味着如果未分配值,它可以为空。但是,String 类型不能为 null。
要修复此错误,需要使用 String 而不是 String 吗?在DetailsPage 和HomePage 的构造函数中。您可以按照以下步骤来执行此操作:
使用String代替String?在DetailsPage 的构造函数中以及调用它的位置。 在HomePage中,在幻灯片小部件中调用DetailsPage时,为imageName和description参数赋予String类型值。
description: imageDescriptions[imageList[index]] ?? "", // Null check added here