【问题标题】: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。这将使边卡可见。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-03-29
      • 1970-01-01
      • 2012-12-15
      • 1970-01-01
      • 2017-10-11
      相关资源
      最近更新 更多