不要将PageView - Flutter居中

问题描述 投票:0回答:1

我目前正在使用carousel-slider库在Flutter中获取旋转木马。

该库基于PageView,在PageView中元素居中。

那是我得到的旋转木马:

这就是我想要的:

以下是使用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));
        }
      },
    );
  },
));

}

如何防止元素居中?

先感谢您

dart flutter
1个回答
0
投票

这是旋转木马Slider中的一个参数,名为:enlarge CenterPage:make it true,这是我的代码,对我来说很好,

 static List<String> imgList; //list of String link of pictures

 static List<T> map<T>(List list, Function handler) {
    List<T> result = [];
    for (var i = 0; i < list.length; i++) {
      result.add(handler(i, list[i]));
    }

    return result;
  }

 int _current = 0;

CarouselSlider(
                items: map<Widget>(
                  imgList,
                  (index, i) {
                    return Container(
                      margin: EdgeInsets.all(5.0),
                      child: ClipRRect(
                        borderRadius: BorderRadius.all(Radius.circular(5.0)),
                        child: Stack(children: <Widget>[
                          Image.network(i, 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. $index image',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 20.0,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
                        ]),
                      ),
                    );
                  },
                ).toList(),
                autoPlay: true,
                enlargeCenterPage: true,
                aspectRatio: 2.0,
                onPageChanged: (index) {
                  setState(() {
                    _current = index;
                  });
                },
              )
© www.soinside.com 2019 - 2024. All rights reserved.