Dart Don'；t居中浏览页面-颤振

我目前正在使用图书馆，以获得在颤振旋转木马

此库基于页面视图，在页面视图中，元素居中

这就是我得到的旋转木马：

这就是我想要的：

下面是使用旋转木马的代码：

CarouselSlider(
    height: 150,
    viewportFraction: 0.5,
    initialPage: 0,
    enableInfiniteScroll: false,
    items: widget.user.lastGamesPlayed.map((game) {
      return Builder(
        builder: (BuildContext context) {
          return Padding(
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: GestureDetector(
                  onTap: () {
                    game.presentGame(context, widget.user);
                  },
                  child: ClipRRect(
                      borderRadius: BorderRadius.all(Radius.circular(25)),
                      child: Container(
                        color: Theme.MyColors.lightBlue,
                        child: Center(
                          child: Padding(
                              padding: EdgeInsets.all(20),
                              child: AutoSizeText(game.name,
                                  style: TextStyle(fontSize: 70),
                                  maxLines: 1)),
                        ),
                      ))));
        },
      );
    }).toList(),
  )

这是转盘滑轨库中的代码：

@override
Widget build(BuildContext context) {
return getWrapper(PageView.builder(
  physics: widget.isScrollEnabled
      ? AlwaysScrollableScrollPhysics()
      : NeverScrollableScrollPhysics(),
  scrollDirection: widget.scrollDirection,
  controller: widget.pageController,
  reverse: widget.reverse,
  itemCount: widget.enableInfiniteScroll ? null : widget.items.length,
  onPageChanged: (int index) {
    int currentPage =
        _getRealIndex(index, widget.realPage, widget.items.length);
    if (widget.onPageChanged != null) {
      widget.onPageChanged(currentPage);
    }
  },
  itemBuilder: (BuildContext context, int i) {
    final int index = _getRealIndex(
        i + widget.initialPage, widget.realPage, widget.items.length);

    return AnimatedBuilder(
      animation: widget.pageController,
      child: widget.items[index],
      builder: (BuildContext context, child) {
        // on the first render, the pageController.page is null,
        // this is a dirty hack
        if (widget.pageController.position.minScrollExtent == null ||
            widget.pageController.position.maxScrollExtent == null) {
          Future.delayed(Duration(microseconds: 1), () {
            setState(() {});
          });
          return Container();
        }
        double value = widget.pageController.page - i;
        value = (1 - (value.abs() * 0.3)).clamp(0.0, 1.0);

        final double height = widget.height ??
            MediaQuery.of(context).size.width * (1 / widget.aspectRatio);
        final double distortionValue = widget.enlargeCenterPage
            ? Curves.easeOut.transform(value)
            : 1.0;

        if (widget.scrollDirection == Axis.horizontal) {
          return Center(
              child:
                  SizedBox(height: distortionValue * height, child: child));
        } else {
          return Center(
              child: SizedBox(
                  width:
                      distortionValue * MediaQuery.of(context).size.width,
                  child: child));
        }
      },
    );
  },
));

}

如何防止图元居中

---

提前感谢您

如果您不想在滚动上设置页面大小的动画，则无需使用此转盘滑块库

另外，

PageView

并不是最好的

小部件

要实现您想要的布局，您应该在

PageScrollPhysics

中使用水平

ListView

导入“包装：颤振/材料.省道”；
类Carousel扩展了无状态小部件{
旋转木马({
关键点，
@需要此项，
@需要此.builder函数，
@需要这个高度，
此.dividerIndent=10，
})：super（key:key）；
最后清单项目；
最后的双分割；
最终函数（BuildContext上下文、动态项）builderFunction；
最终双倍高度；
@凌驾
小部件构建（构建上下文）{
返回容器(
高度:高度,，
子项：ListView.separated(
物理：物理（），
separatorBuilder：（上下文，索引）=>分隔符(
缩进：分割缩进，
),
滚动方向：轴水平，
itemCount:items.length，
itemBuilder：（上下文，索引）{
Widget item=builderFunction（上下文，items[index]）；
如果（索引==0）{
返回填充(
儿童：项目，
填充：仅限边缘设置（左：分隔凹痕），
);
}else if（index==items.length-1）{
返回填充(
儿童：项目，
填充：仅限边缘集（右：分隔凹痕），
);
}
退货项目；
}),
);
}
}

用法

Carousel(
身高：150，
项目：widget.user.lastGamesPlayed，
builderFunction：（上下文，项）{
返回ClipRRect(
borderRadius:borderRadius.all（半径圆形（25）），
子：容器(
宽度：200，
颜色：Theme.MyColors.lightBlue，
儿童：中心(
孩子：填充(
填充：边缘设置。全部（20），
子对象：AutoSizeText(
item.name，
样式：TextStyle（字体大小：70），
maxLines:1，
),
),
),
),
);
},
)

更新

正如@AdamK所观察到的，我的解决方案与

页面视图

没有相同的滚动物理行为，它更像一个水平

列表视图

如果您正在寻找这种分页行为，您应该考虑编写自定义<代码> ScReopyStase<代码>，并在可滚动小部件上使用它。

---

这是一篇解释得很好的文章，有助于我们达到预期效果。

添加部分内容code@diegoveloper我已经更新了我的帖子谢谢你的回答，这肯定是在正确的轨道上，但我尝试了上面的代码，它没有正确地跨越页面（页面在第一页向左对齐后没有正确停止）。不过，我根据您的代码进行了一些搜索，发现了这篇文章：它确实有一个更完整的解决方案（基本上是一个定制的物理实现）。您是否可以更新您的解决方案，以提及限制，并将文章链接作为建议？在那之后，我将投票并授予你奖金，@AdamK，很高兴我的回答在某种程度上帮助了你：）