如何使轮播滑块的中心比其他滑块大？答案

【问题标题】：How to make the center of carousel slider bigger than the others?如何使轮播滑块的中心比其他滑块大？
【发布时间】：2021-08-01 13:31:53
【问题描述】：

我想让中心旋转木马比其他旋转木马更大

      CarouselSlider(
      items: generateImageTiles(),
      options: CarouselOptions(
        enlargeCenterPage: true,
        aspectRatio: 16 / 5,
        viewportFraction: 0.4,
        reverse: false,
        initialPage: _current,
        onPageChanged: (index, other) {
          setState(() {
            _current = index;
            pizza = images[_current];
            price = prices[_current];
            name = names[_current];      
          });
        },
      ),
    ),

这就是我想要达到的目标APP UI

【问题讨论】：

这个包只是将中心项目放大了一点，因为你想要中心的小部件完全是另一种形状，我认为你应该开发自己的轮播。

标签： android flutter dart carousel carousel-slider

【解决方案1】：

在CarouselOptions 上，viewportFraction 负责使中心小部件变大/变小。可以是>0.0 和<=1.0。如果您想更改aspectRatio，请在CarouselOptions 上使用aspectRatio。

如果发现 Ui 没有变化，请执行 flutter clean 并再次运行。

完整的小部件：

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

class CurS extends StatefulWidget {
  const CurS({Key? key}) : super(key: key);

  @override
  _CurSState createState() => _CurSState();
}

class _CurSState extends State<CurS> {
  int _current = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CarouselSlider(
        items: [1, 2, 3, 4, 5].map((i) {
          return Builder(
            builder: (BuildContext context) {
              return Container(
                width: MediaQuery.of(context).size.width,
                margin: EdgeInsets.symmetric(horizontal: 5.0),
                decoration: BoxDecoration(color: Colors.amber),
                child: Text(
                  'text $i',
                  style: TextStyle(fontSize: 16.0),
                ),
              );
            },
          );
        }).toList(),
        options: CarouselOptions(
          enlargeCenterPage: true,
          aspectRatio: 16 / 5,
          viewportFraction: .8,
          reverse: false,
          initialPage: _current,
          onPageChanged: (index, other) {
            setState(() {
              _current = index;
            });
          },
        ),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

您需要在名为 as 的选项中添加一个属性

放大中心页面：真，

视口分数：0.8，

这样就可以了。还要使视口分数小于 1。这将使边卡可见。

【讨论】：