使用flutter调用图像和描述

问题描述 投票:0回答:1

我的问题是这样的,我想调用图像和描述,但我有超过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 弹出图像描述,但我做不到,我尝试了地图和列表,但没有成功。

android ios flutter image mobile
1个回答
0
投票

您希望在主页页面上为每个图像显示不同的描述。为此,您需要以某种方式管理与幻灯片小部件中 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
© www.soinside.com 2019 - 2024. All rights reserved.