android - 如何使轮播滑块的中心比其他滑块大？

Question

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

      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

标签： androidflutterdartcarouselcarousel-slider

Answer 1

On CarouselOptions,viewportFraction负责使中心小部件变大/变小。它可以是>0.0和<=1.0。如果您想更改aspectRatio，请使用aspectRatioon 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;
            });
          },
        ),
      ),
    );
  }
}