繁体   English   中英

如何在 carousel_slider 中使用资产图像?

[英]How to work with asset images in carousel_slider?

这是我调用小部件并尝试传入包含图片的小部件列表的地方。

Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      Padding(
        padding: const EdgeInsets.all(10),
           child: CarouselSlider(
               options: CarouselOptions(
             aspectRatio: 2.0,
             enlargeCenterPage: true,
             enableInfiniteScroll: false,
             initialPage: 2,
             autoPlay: false,
            ),
             items: imageSliders,
          )),

这就是小部件列表。

final List<String> imgList = [
  'images/shoppinglist_main.jpg',
  'images/shoppinglist_main.jpg'
];

final List<Widget> imageSliders = imgList
    .map((item) => Container(
          child: Container(
            margin: EdgeInsets.all(5.0),
            child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(5.0)),
                child: Stack(
                  children: <Widget>[
                    Image.asset(item, fit: BoxFit.cover, width: 1000.0),
                    Positioned(
                      bottom: 0.0,
                      left: 0.0,
                      right: 0.0,
                      child: Container(
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            colors: [
                              Color.fromARGB(200, 0, 0, 0),
                              Color.fromARGB(0, 0, 0, 0)
                            ],
                            begin: Alignment.bottomCenter,
                            end: Alignment.topCenter,
                          ),
                        ),
                        padding: EdgeInsets.symmetric(
                            vertical: 10.0, horizontal: 20.0),
                        child: Text(
                          'No. ${imgList.indexOf(item)} image',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ],
                )),
          ),
        ))
    .toList();

这是错误消息:

Null 不是 Future 的子类型。 当运行时 null 安全启用时,这将失败。 在 63 毫秒内重新启动应用程序。 ══╡渲染图书馆捕获的例外╞═════════════════════════════════════════ ════════════════ 在 performLayout() 过程中抛出了以下断言:RenderAspectRatio 具有无限约束。 此 RenderAspectRatio 的纵横比为 2,但同时具有无界宽度和无界高度约束。 因为这两个约束都是无界的,所以这个渲染 object 不知道要消耗多少大小。 相关的导致错误的小部件是:AspectRatio

有人可以给我一个关于如何解决这个问题的提示......

因为这两个约束都是无界的,所以这个渲染 object 不知道要消耗多少大小。

您可以像这样分配约束:

SizedBox(
  width: 250, //here your width
  height: 250, //here your height
  child: CarouselSlider(
          options: CarouselOptions(
            aspectRatio: 2.0,
            enlargeCenterPage: true,
            enableInfiniteScroll: false,Ï
            initialPage: 2,
            autoPlay: false,
          ),
             items: imageSliders,
        )
   )

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM