我目前正在使用carousel-slider库来使 carousel 处于Flutter 状态.

该库基于页面视图,在页面视图中,元素居中.

这就是我得到的 carousel :

第一 carousel

这就是我想要的:

通缉转盘

以下是使用CarouselSlider的代码:

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(),
  )

下面是CarouselSlider库中的代码:

@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不是实现您想要的布局的最佳Widget,您应该使用水平ListViewPageScrollPhysics.

import 'package:flutter/material.dart';

class Carousel extends StatelessWidget {
  Carousel({
    Key key,
    @required this.items,
    @required this.builderFunction,
    @required this.height,
    this.dividerIndent = 10,
  }) : super(key: key);

  final List<dynamic> items;
  final double dividerIndent;

  final Function(BuildContext context, dynamic item) builderFunction;

  final double height;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      child: ListView.separated(
          physics: PageScrollPhysics(),
          separatorBuilder: (context, index) => Divider(
                indent: dividerIndent,
              ),
          scrollDirection: Axis.horizontal,
          itemCount: items.length,
          itemBuilder: (context, index) {
            Widget item = builderFunction(context, items[index]);
            if (index == 0) {
              return Padding(
                child: item,
                padding: EdgeInsets.only(left: dividerIndent),
              );
            } else if (index == items.length - 1) {
              return Padding(
                child: item,
                padding: EdgeInsets.only(right: dividerIndent),
              );
            }
            return item;
          }),
    );
  }
}

用法

           Carousel(
              height: 150,
              items: widget.user.lastGamesPlayed,
              builderFunction: (context, item) {
                return ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(25)),
                  child: Container(
                    width: 200,
                    color: Theme.MyColors.lightBlue,
                    child: Center(
                      child: Padding(
                        padding: EdgeInsets.all(20),
                        child: AutoSizeText(
                          item.name,
                          style: TextStyle(fontSize: 70),
                          maxLines: 1,
                        ),
                      ),
                    ),
                  ),
                );
              },
            )

UPDATE

正如@adamk所观察到的,我的解决方案不具有与PageView相同的滚动物理行为,它的行为更像水平ListView.

如果您正在寻找这种分页行为,您应该考虑编写一个自定义的ScrollPhysics,并在您的可滚动小部件上使用它.

This是一篇解释得很好的文章,可以帮助我们达到预期的效果.

Dart相关问答推荐

Dart:当两个或多个任务等待同一个 Future 时会发生什么

flutter.io (dart) - 将填充设置为设备宽度的百分比?

如何在 Flutter 中向 AnimationController 添加 Curves 类动画?

触发从小部件到状态对象的函数

Flutter:Firebase 基本查询或基本搜索代码

AngularDart 可以直接路由到组件吗?

Dart 包版本如何工作以及我应该如何对我的 Flutter 插件进行版本控制?

try 部署到 Google AppEngine 时出现 Dev_appserver.py 错误

如何在 Dart 中创建一个空 Set

从列表中删除项目后更新 UI

当文本在 Flutter 中溢出时如何使 Text 小部件像选取框一样

有没有更好的方法来解析 Dart 中的 int

如何从Flatter应用程序中导航到网页?(OAuth)

如何 Select 性地传递可选参数?

如何减少 ListView.builder 中 RaisedButton 的宽度?

为什么 Dart 有编译时常量?

有没有更好的方法来找出文件或目录是否存在?

Dart vs Polymer vs Bootstrap

是否可以在 Dart 中的一行上初始化列表?

包裹构造函数参数的花括号代表什么?