我正在使用Ffltter中的CarouselSlider来显示一系列图像.我想要的行为是:

中心图像应放大并突出显示. 中央图像左侧和右侧的图像应该是部分可见的,基本上显示了其中的一半. 问题:右边的图像与放大的中心图像重叠,这是我想避免的.

以下是我的实现的一个版本:

 Widget build(BuildContext context) {
    double imageWidth = MediaQuery.of(context).size.width * 0.4;
    return Column(
      children: [
        Container(
          width: MediaQuery.of(context).size.width *
              0.8, // This sets the width of the carousel.
          child: CarouselSlider.builder(
            itemCount: imageList.length,
            itemBuilder: (BuildContext context, int itemIndex, int realIndex) {
              bool isCurrentPage = itemIndex == _currentIndex;
              double scale = isCurrentPage ? 1.5 : 1.0;
          return Center(
            child: Transform.scale(
              scale: scale,
              child: Opacity(
                opacity: 1.0,
                child: Image.asset(
                  imageList[itemIndex],
                  fit: BoxFit.fill,
                  width: isCurrentPage ? imageWidth * 0.8 : imageWidth,
                  height: 250,
                ),
              ),
            ),
          );
        },
        options: CarouselOptions(
          height: MediaQuery.of(context).size.height *
              (widget.isMobile ? 0.4 : 0.6),
          autoPlay: true,
          enlargeCenterPage: true,
          viewportFraction: 0.333,
          aspectRatio: 16 / 9,
          onPageChanged: (index, reason) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
    ),
    const SizedBox(
      height: 50,
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        buildIndicator(_currentIndex - 1),
        buildIndicator(_currentIndex),
        buildIndicator(_currentIndex + 1),
      ],
    ),
  ],
);

}

here is how it looks like enter image description here

我想实现的目标是:

enter image description here

推荐答案

结果

enter image description here

解释

您需要设置enlargeStrategy:

使用ExpangeStrategy确定放大中心页的方法.

CenterPageEnlargeStrategy.height

备注

你将不得不玩弄aspectRatio/viewportFraction,因为你目前的价值它不会真正起作用.

代码

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

final List<String> imgList = [
  'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
  'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
  'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
  'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80'
];

void main() => runApp(ImageSliderDemo());

class ImageSliderDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Image slider demo')),
        body: Center(
            child: CarouselSlider(
          options: CarouselOptions(
            enlargeStrategy: CenterPageEnlargeStrategy.height,
            enlargeCenterPage: true,
          ),
          items: imgList
              .map((item) => Container(
                    child: Center(
                        child: Image.network(item,
                            fit: BoxFit.cover, width: 1000)),
                  ))
              .toList(),
        )),
      ),
    );
  }
}

Flutter相关问答推荐

Android元数据为1.9.0,预期版本为1.7.1,如何解决flutter应用程序构建失败问题?

文本未设置在集装箱摆动的中心

下拉图标未居中

SupabaseFlutter 集成问题:无法更新行

为什么我的PIN字段在第一次打字时不显示数字?

Flutter 中的多页表现

为什么Spotify Auth API返回400,而";code_verier不正确?

如何创建这样的按钮

没有固定宽度的小部件可以约束文本小部件吗?

Flutter CarouselSlider中如何防止右图与放大的中心图重叠?

Flutter http 请求获取 null

在Flutter中为容器实现线性渐变背景动画

Firestore 使用 Flutter 以奇怪的格式保存数据

如何使Flutter 屏幕无法关闭?

是否可以在 flutter 应用程序中使用 jetpack compose?

Flutter:为什么我的 listTile colored颜色 被容器 colored颜色 覆盖了?

Flutter/Dart - 从外部类更新状态

Flutter HLS .m3u8 视频无法实时播放

有任何方法可以在应用程序移动背景恢复时显示 appopenAd

Flutter Firebase:如何判断返回值是否是特定对象