首页 > 解决方案 > 无法在轮播中加载图像列表

问题描述

我试图在轮播滑块中传递图像列表视图,但它显示错误。所有图片都可以正常工作,但是当我在列表中传递它时,它显示无法加载。

以下是轮播滑块的代码 - :

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';



class UserProfile extends StatefulWidget {
  UserProfile() : super();

  @override
  _UserProfileState createState() => _UserProfileState();
}

class _UserProfileState extends State<UserProfile> {


  CarouselSlider carouselSlider;

  List imgList = [
    'assets/user1.jpg',
    'assets/f.png',
    'assets/f2.jpg',
  ];




  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildAppBar(),
      body: Container(
        child: Padding(
          padding: const EdgeInsets.only(left: 30, right: 30, top: 10),
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [


                Flexible(
                  fit: FlexFit.loose,
                  flex: 5,
                  child: Container(
                    height: 400,
                    child: ListView.builder(
                      itemCount: imgList.length,
                      itemBuilder: (BuildContext context, int index){
                        return Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[


                            CarouselSlider(
                                options: CarouselOptions(
                                  height: 385.0,
                                  enlargeCenterPage: true,
                                  autoPlay: true,
                                  aspectRatio: 16 / 9,
                                  autoPlayCurve: Curves.easeInBack,
                                  enableInfiniteScroll: true,
                                  autoPlayAnimationDuration: Duration(milliseconds: 900),
                                  viewportFraction: 0.8,
                                ),
                                items: [
                                  Padding(
                                    padding: const EdgeInsets.only(left: 30.0),
                                    child: Container(
                                      height: 250,
                                      margin: EdgeInsets.symmetric(vertical: 0),
                                      decoration: BoxDecoration(
                                        color: Colors.black,
                                        borderRadius: BorderRadius.circular(16),
                                        boxShadow: [
                                          BoxShadow(
                                            color: Colors.blueGrey[100],
                                            blurRadius: 3,
                                            spreadRadius: 3,
                                          ),
                                        ],
                                      ),
                                      child: Image.asset(
                                        '${imgList[index]}',
                                        fit: BoxFit.fill,
                                      ),
                                    ),
                                  ),
                                ]
                            ),


                          ],
                        );
                      },
                    ),
                  ),
                ),


                Flexible(
                  fit: FlexFit.loose,
                  flex: 4,
                  child: Placeholder(),
                ),

              ],
            ),
          ),
        ),
      ),
    );
  }



  Widget buildAppBar() => AppBar(
    elevation: 15,
    backgroundColor: Colors.white,
    centerTitle: true,
    leading: InkWell(
      child: Icon(
        Icons.arrow_back_ios,
        color: Colors.pinkAccent,
      ),
      onTap: () {
        Navigator.pop(context);
      },
    ),
    title: Text(
      'Carousel Slider',
      style: TextStyle(
        fontSize: 25,
        color: Colors.black,
      ),
    ),
  );
}

这显示错误-:无法加载图像列表 ['assets/user1.jpg','assets/f.png','assets/f2.png',]

乐于接受建议。

编辑-:文件夹结构图片 在此处输入图像描述

在此处输入图像描述

标签: flutterflutter-layoutcarouselflutter-dependencies

解决方案


删除 ListView 小部件

并将其作为项目传递给您的CarouselSlider项目

items: imgList.map((item) {
return Builder(
builder: (BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Container(
height: 250,
margin: EdgeInsets.symmetric(vertical: 0),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.blueGrey[100],
blurRadius: 3,
spreadRadius: 3,
),
],
),
child: Image.asset(
item,
fit: BoxFit.fill,
),
),
),
},
);
}).toList(),

推荐阅读