如何使旋转木马滑块的中心比其他滑块大？

问题描述

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

      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

解决方法

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

如果您发现 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;
            });
          },);
  }
}