颤振从 CarouselSlider 中移除左侧间隙

我正在使用 CarouselSlider 滑动我的容器,但问题是它在左侧显示了很多填充。

我的代码

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    double statusbar = MediaQuery.of(context).padding.top;

    final DateTime now = DateTime.now();
    final DateFormat formatter = DateFormat('E, MMM d, y');
    final String formatted = formatter.format(now);
    print(formatted); // something like 2013-04-20

    return Scaffold(
      backgroundColor: Color(0xFF612c58),
      body: Column(
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.only(bottomLeft: Radius.circular(40), bottomRight: Radius.circular(40)),
            child: Container(
              color: Colors.white,
              height: height * 0.52,
              child: Column(
                children: <Widget>[
                  SizedBox(
                    height: statusbar * 2,
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 30, right: 30),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text(
                          'Popular',
                          style: TextStyle(fontSize: 23, fontWeight: FontWeight.bold),
                        ),
                        Text("$formatted")
                      ],
                    ),
                  ),
                  CarouselSlider(
                    options: CarouselOptions(height: height * 0.39,
                      enableInfiniteScroll: false,

                    ),
                    items: [0, 1, 2, 3, 4].map((i) {
                      return Builder(
                        builder: (BuildContext context) {
                          return _popular(i);
                        },
                      );
                    }).toList(),
                  ),

                  Container(
                    height: height * 0.006,
                    width: width * 0.1,
                    color: Colors.grey,
                  ),
                ],
              ),
            ),
          ),
          SizedBox(height: height * 0.02,),
          Container(
            padding: EdgeInsets.only(left: 20),
              width: double.infinity,child: Text('Recent Stories', style: TextStyle(color: Colors.white, fontSize: 21, fontWeight: FontWeight.bold),))
        ],
      ),
    );
  }

  Widget _popular(int index) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    double statusbar = MediaQuery.of(context).padding.top;

    return Container(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        SizedBox(height: height * 0.02,),
        ClipRRect(
          borderRadius: BorderRadius.circular(70.0),

          child: Container(
            height: height * 0.25,
            width: width * 0.7,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(
                  'assets/images/1.png',
                ),
              ),
            ),
          ),
        ),
        SizedBox(height: height * 0.01,),
        Container(
          padding: EdgeInsets.only(left: 15),
            width: double.infinity,
            child: Text(
              'Amazing lesson Story',
              style: TextStyle(fontWeight: FontWeight.bold),
            )),
        SizedBox(height: height * 0.01,),
        Container(
            padding: EdgeInsets.only(left: 15),
            width: double.infinity,
            child: Text(
              'Post By Marco - 10 min',
            )),

      ],
    ));
  }
}

enter image description here

如您所见,它在左侧显示间隙,我需要删除它并需要在幻灯片之间设置填充。我还检查了文档,但没有显示填充选项,或者我可能有任何选项,但我找不到它。谁能告诉我如何才能删除填充并在 sldies 之间添加间隙谢谢:)

stack overflow flutter remove left side gap from CarouselSlider
原文答案

答案:

作者头像

尝试将这些选项添加到 CarouselOptions

aspectRatio: 2.0,
disableCenter: true,
viewportFraction: 1,
enlargeCenterPage: false,

如果您想在右侧显示下一张图片的一小部分,请尝试将 viewportFraction 减小到 0.95。

在VSCODE中ctrl+点击CarouselOptions可以看到所有可以传递给CarouselOptions的选项

作者头像

一种选择是在 itemBuilder 中为包裹您的孩子的容器添加对齐方式:

      @override
  Widget build(BuildContext context) {
    return CarouselSlider.builder(
      carouselController: carouselController,
      options: CarouselOptions(
        disableCenter: false,
        viewportFraction: 0.8,
        enlargeCenterPage: false,
        height: getProportionateScreenHeight(defaultCarouselHeight),
        enableInfiniteScroll: false,
        initialPage: 0,
        onPageChanged: onPageChanged,
        enlargeStrategy: CenterPageEnlargeStrategy.height,
      ),
      itemCount: model.topNewsList.length,
      itemBuilder: (context, index, realindex) => Container(
        alignment: const Alignment(-1.5, -1.0),
        child: CarouselCell(
          news: model.topNewsList[index],
          onNewsPress: () => Get.to(
            () => DetailScreen(),
            arguments: model.topNewsList[index],
          ),
        ),
      ),
    );
  }

如您所见,根据以下解释,我将对齐添加到左 - 右 -1,5 和上 - 下 -1 : https://youtu.be/g2E7yl3MwMk

我知道这不是最干净的方法,所以如果其他人找到另一种解决方案,那将对所有人都有帮助:)

作者头像

CarouselOptions 具有 padEnds 属性,您可以将其设置为 false 以删除列表两端的填充。

资料来源: a possible duplicate of this question