如何删除PageView在扑朔迷离中的领先空间？

发布于 2025-02-13 22:04:24 字数 1282 浏览 0 评论 0原文

我通过使用pageView实现了图像旋转木马，然后对其进行了研究，然后对此结果进行了存档。

如您所见，我在PageView的第一个项目前有额外的空间。我不知道删除它。有人做过吗？非常感谢

我的pageview类

List<String> images = [
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTIZccfNPnqalhrWev-Xo7uBhkor57_rKbkw&usqp=CAU",
  "https://cdn.dribbble.com/users/4684322/screenshots/18696799/media/722072055e079b1b7c88b1894a1128d7.png?compress=1&resize=1000x750&vertical=top"
];
return Container(
  color: Colors.red,
  width: double.infinity,
  height: 200,
  child: PageView.builder(
    itemCount: 2,
    pageSnapping: true,
    controller: _pageController,
    itemBuilder: (context, pagePosition) {
      return Container(
          margin: EdgeInsets.only(right: 10),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(8.0),
            child: Image.network(
              images[pagePosition],
              fit: BoxFit.cover,
            ),
          ));
    },
  ),
);

pageview控制器

_pageController = PageController(viewportFraction: 0.8);

原文

I implemented images carousel by using PageView and research about it for a moment and then I archived this result.

As you see, I got extra space in front of first item in PageView. I have no idea to remove it. Has anyone ever did it ? Thank you so much

My PageView Class

List<String> images = [
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTIZccfNPnqalhrWev-Xo7uBhkor57_rKbkw&usqp=CAU",
  "https://cdn.dribbble.com/users/4684322/screenshots/18696799/media/722072055e079b1b7c88b1894a1128d7.png?compress=1&resize=1000x750&vertical=top"
];
return Container(
  color: Colors.red,
  width: double.infinity,
  height: 200,
  child: PageView.builder(
    itemCount: 2,
    pageSnapping: true,
    controller: _pageController,
    itemBuilder: (context, pagePosition) {
      return Container(
          margin: EdgeInsets.only(right: 10),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(8.0),
            child: Image.network(
              images[pagePosition],
              fit: BoxFit.cover,
            ),
          ));
    },
  ),
);

PageView Controller

_pageController = PageController(viewportFraction: 0.8);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不再让梦枯萎 2025-02-20 22:04:24

解决方案

在深入浏览浏览量类之后，我只是尝试了每个构造函数属性（T_T）并获得了解决方案。

padends：false

将其设置在pageview的构造函数中，

PageView.builder(
   itemCount: 2,
   padEnds: false,
   pageSnapping: true
   itemBuilder: (context, pagePosition) {
      return Container();
   },
)

如果有人有其他解决方案，您可以告诉我吗？ :)

Solution

After I take deep inside PageView class, I just tried every constructor properties ( T_T ) and got solution.

padEnds: false

set it in constructor of PageView

PageView.builder(
   itemCount: 2,
   padEnds: false,
   pageSnapping: true
   itemBuilder: (context, pagePosition) {
      return Container();
   },
)

If anyone has another solution, you can tell me? :)

回复收藏 0 原文

像极了他 2025-02-20 22:04:24

更改视口量：1而不是0.8；

_pageController = PageController(viewportFraction: 1);

Change viewportFraction: 1 instead of 0.8;

_pageController = PageController(viewportFraction: 1);

回复收藏 0 原文

腹黑女流氓 2025-02-20 22:04:24

我复制了您的代码并运行了它。没有问题。建议将其更改如下：

return Container(
          margin: const EdgeInsets.only(right: 10),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(8.0),
            child: Image.asset("asset/bb.jpeg",
              fit: BoxFit.cover,
              width: double.infinity,
            )
          ))

在这里查看

I copied your code and ran it. There was no problem. It is suggested to change it as follows:

return Container(
          margin: const EdgeInsets.only(right: 10),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(8.0),
            child: Image.asset("asset/bb.jpeg",
              fit: BoxFit.cover,
              width: double.infinity,
            )
          ))

look here

回复收藏 0 原文

~没有更多了~