Flutter：如何创建上一个和下一个项目较小的 PageView？

Question

我想在 Flutter 中创建以下类型的轮播视图

到目前为止我已经尝试过什么

• 我已经有了这个carousel_slider 1.4.1 package:flutter package 无法按照我的要求创建轮播视图
• 我已尝试使用源代码并尝试根据我的要求进行修改，但没有得到正确的解决方案 这是修改后代码的输出

• 我也试过这个medium post。
• https://medium.com/@caleb_52205/using-animatedbuilder-and-pageview-builder-for-a-beautiful-carousel-3b05161d981d

我的代码

Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/home.png'),
                  fit: BoxFit.cover,
                ),
                shape: BoxShape.rectangle,
              ),
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    width: 50.0,
                    height: 53.0,
                    child: Center(
                      child: Text(
                        "N",
                        style: TextStyle(
                            color: AppColors.textColor, fontSize: 20.0),
                      ),
                    ),
                    padding:
                        EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
                    decoration: BoxDecoration(
                        border:
                            Border.all(color: AppColors.textColor, width: 2)),
                  ),
                  SizedBox(
                    height: 68,
                  ),
                  Text(
                    "Hi",
                    style: TextStyle(fontFamily: 'f_book', fontSize: 16),
                  ),
                  Text(
                    userName,
                    style: TextStyle(
                        fontFamily: 'f_bold',
                        fontSize: 28,
                        fontWeight: FontWeight.bold),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 40),
                    child: CarouselSlider(
                      items: child,
                      autoPlay: false,
                      height: 400,
                      enableInfiniteScroll: true,
                      initialPage: 0,
                      enlargeCenterPage: true,
                      aspectRatio: 2.0,
                      onPageChanged: (index) {
                        setState(() {
                          _current = index;
                        });
                      },
                    ),
                  ),
                  Container(
                      margin: EdgeInsets.only(top: 40),
                      child: Center(child: Text(Constants.howDoesItWork)))
                ],
              ),
            )

如果需要更多信息，请告诉我。提前致谢。您的努力将不胜感激。

Answer 1

你只需要把这个类放在脚手架上。

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

 @override
 State<PageViewExample> createState() => _PageViewExampleState();
}

class _PageViewExampleState extends State<PageViewExample> {
  int _currentIndex = 0;

  final _pageViewController =
  PageController(initialPage: 0, viewportFraction: 0.75);

  final myImagesList = [
    'asset/uni_images/ada.jpg',
    'asset/uni_images/atu.jpg',
    'asset/uni_images/aztu.jpg',
    'asset/uni_images/adnsu.jpg',
    'asset/uni_images/bdu.jpg',
    'asset/uni_images/idman.jpg',
    'asset/uni_images/adra.jpg',
    'asset/uni_images/azi.jpg',
    'asset/uni_images/musiqiaka.jpg',
    'asset/uni_images/ndu.jpg',
    'asset/uni_images/dia.jpg',
    'asset/uni_images/atuGence.jpg',
    'asset/uni_images/admiu.jpg',
    'asset/uni_images/adu.jpg',
    'asset/uni_images/sdu.jpg',
    'asset/uni_images/adpu.jpg',
    'asset/uni_images/aqrar.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        height: 200,
        child: PageView.builder(
            controller: _pageViewController,
            itemCount: myImagesList.length,
            physics: const BouncingScrollPhysics(
                parent: AlwaysScrollableScrollPhysics()),
            onPageChanged: (index) {
              setState(() {
                _currentIndex = index;
              });
            },
            itemBuilder: (context, index) {
              final images = myImagesList[index];
              var _scale = _currentIndex == index ? 1.0 : 0.8;
              return TweenAnimationBuilder(
                  tween: Tween(begin: _scale, end: _scale),
                  duration: const Duration(milliseconds: 350),
                  child: Container(
                    decoration: BoxDecoration(
                      color: secondColor,
                      borderRadius: BorderRadius.circular(15),
                      image: DecorationImage(
                          image: AssetImage(images), fit: BoxFit.cover),
                    ),
                  ),
                  builder: (context, double value, child) {
                    return Transform.scale(
                      scale: value,
                      child: child,
                    );
                  });
            }),
      ),
    );
  }
}