求助：Flutter实现200+图片对应描述的调用方案

1. 创建数据模型类 #

定义一个类关联图片名和对应描述，确保每个图片与描述一一绑定：

class ImageItem {
  final String imageName;
  final String description;

  ImageItem({required this.imageName, required this.description});
}

2. 修改HomePage的slide数据结构 #

将原来的字符串列表替换为ImageItem实例列表，每个条目包含图片名和对应描述：

slide('World of Classics', [
  ImageItem(
    imageName: 'peter pan in kensington gardens.jpg',
    description: '《肯辛顿花园里的彼得·潘》讲述了彼得·潘在成为永无岛男孩前的奇幻经历...',
  ),
  ImageItem(
    imageName: 'peter pan.jpg',
    description: '《彼得·潘》讲述永远长不大的男孩彼得·潘，带领孩子们在永无岛展开的冒险故事...',
  ),
  // 其余图片的ImageItem实例依次添加
]),
slide('Full of Love Novels', [
  ImageItem(
    imageName: 'aski memnu.jpg',
    description: '《禁果》是土耳其经典爱情小说，刻画了一段跨越道德边界的婚外恋情纠葛...',
  ),
  // 其余图片的ImageItem实例依次添加
]),

3. 更新slide方法的参数与跳转逻辑 #

将slide方法的List<String> imageList改为List<ImageItem> imageItems，跳转时传递对应描述：

Widget slide(String info, List<ImageItem> imageItems) {
  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: imageItems.length,
            itemBuilder: (context, index) {
              final item = imageItems[index];
              return GestureDetector(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => DetailsPage(
                        imageName: item.imageName,
                        description: item.description,
                      ),
                    ),
                  );
                },
                child: Container(
                  width: screenWidth * 0.20,
                  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/${item.imageName}'),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ],
    ),
  );
}

4. 修改DetailsPage接收并展示描述 #

更新DetailsPage的参数，添加description字段，替换原占位文本为实际描述：

class DetailsPage extends StatefulWidget {
  final String imageName;
  final String description;

  const DetailsPage({
    Key? key,
    required this.imageName,
    required this.description,
  }) : 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: () {
                        // 用pop返回上一页，避免重复创建HomePage
                        Navigator.pop(context);
                      },
                    )
                  ],
                ),
              ),
              Container(
                height: screenHeight * 0.5,
                color: Colors.white,
                child: Align(
                  alignment: Alignment.center,
                  child: SizedBox(
                    width: screenWidth,
                    child: Image.asset(
                      'assets/pics/${widget.imageName}',
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 10.0, top: 16.0, right: 10.0),
                child: Text(
                  widget.description,
                  style: TextStyle(
                      fontSize: screenWidth * 0.1 / 3, color: Colors.grey),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

额外优化建议 #

• 将所有ImageItem数据抽取到单独文件（如data/book_info.dart），避免HomePage代码臃肿，方便维护200+条数据。
• 若描述较长，可给Text组件添加maxLines和overflow: TextOverflow.ellipsis属性优化显示。

内容的提问来源于stack exchange，提问作者user22653733