如何制作中心更大的旋转木马？ （扑）

Posted 2023-02-23

【中文标题】如何制作中心更大的旋转木马？ （扑）

【英文标题】：How to make a carousel where the center is bigger? (flutter)

【发布时间】：2020-06-03 16:50:17

【问题描述】：

我想要一个幻灯片，您可以在其中看到三个容器，中间的容器应该比其他两个大。

它应该是这样的：

我尝试将放大中心页面：true，但它只适用于 viewportFraction: 0.8。

这是现在的样子：

这是我使用 ,,carousel_slider: ^1.4.1'' 插件的代码：

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

import '../classes/konto.dart';
import '../providers/account_type.dart';

class Carousel extends StatefulWidget 
  @override
  _CarouselState createState() => _CarouselState();


class _CarouselState extends State<Carousel> 
  @override
  Widget build(BuildContext context) 
    return Consumer<GeldKonto>(
      builder: (ctx, konto, child) => CarouselSlider.builder(
          height: MediaQuery.of(context).size.height * 0.5,
          //realPage: 1,
         aspectRatio: 16/4,
          viewportFraction: 0.4,
          initialPage: 0,
          enableInfiniteScroll: true,
          reverse: false,
          autoPlay: true,
          autoPlayInterval: Duration(seconds: 4),
          autoPlayAnimationDuration: Duration(milliseconds: 800),
          autoPlayCurve: Curves.fastOutSlowIn,
          pauseAutoPlayOnTouch: Duration(seconds: 10),
          enlargeCenterPage: true,
          scrollDirection: Axis.horizontal,
          itemCount: konto.kontos.length,
          itemBuilder: (BuildContext context, int i) 
            Map<String, Konto> kontoHier = konto.kontos;
            String key = kontoHier.keys.elementAt(i);
            return 
               Container(
                 height: 200,
                 child: Column(mainAxisAlignment: MainAxisAlignment.center ,
              children: <Widget>[
                  Text(
                    kontoHier[key].title,
                    style: Theme.of(context).textTheme.title,
                  ),
                  Container(
                    height: 150,
                    width: 150,
                    margin: EdgeInsets.all(10.0),
                    decoration: BoxDecoration(
                        color: Colors.transparent,
                        border: Border.all(
                          color: Colors.white54,
                          width: 2,
                        ),
                        shape: BoxShape.circle),
                        child: kontoHier[key].icon,
                       
                  ),
                   Text(
                    '$kontoHier[key].kontostand',
                    style: Theme.of(context).textTheme.title,
                  ),
              ]
            ),
               );
          ),
    );
  

如何让中心变大（另外两个变小）？

我是 Flutter 新手，很想听听一些建议 :)

【参考方案1】：

使用如图所示的比例小部件

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

    class CArousel extends StatefulWidget 
      @override
      _CArouselState createState() => _CArouselState();
    

    class _CArouselState extends State<CArousel> 
      int _current = 0;

      @override
      Widget build(BuildContext context) 
        return Scaffold(
          body: Container(
              padding: EdgeInsets.only(top: 200),
              child: CarouselSlider.builder(
                  viewportFraction: 0.7,
                  initialPage: _current,
                  onPageChanged: (index) 
                    setState(() 
                      _current = index;
                    );
                  ,
                  itemCount: 6,
                  itemBuilder: (ctx, int index) 
                    return Transform.scale(
                      scale: index == _current ? 1 : 0.8,
                      child: Container(
                        height: 400,
                        width: 300,
                        color: Colors.red,
                        child: Center(
                          child: Text(
                            "$index",
                            style: TextStyle(fontSize: 30),
                          ),
                        ),
                      ),
                    );
                  )),
        );
      
    

【讨论】：

比例还是没变，不过谢谢解答。还有其他方法吗？

你可以使用Transform.scale() 小部件，你可以通过匹配当前索引来缩放活动的孩子。

这是个好主意。如何匹配当前索引？我试着做,, scale: i ==key? 1.5 :1''，但没有小部件符合 if 语句。如何找出当前索引？

我认为它不起作用，因为 itemcounter 是必需的。

我已经编辑了我的答案，我希望能消除迷雾