如何使ListWheelScrollView水平

Question

我试图使用水平的ListView窗口小部件来放大中心项目。我尝试使用普通的ListView，但无法放大中心项目。然后，在搜索文档时，我遇到了ListWheelScrollView，但不幸的是它似乎不支持水平子级布局。因此，基本上我希望创建一个具有中心项目放大率的水平ListView。如果有人至少可以指出我正确的方向，我将不胜感激。谢谢

Answer 1

这是我的解决方法。

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

class ListWheelScrollViewX extends StatelessWidget {
  final Widget Function(BuildContext, int) builder;
  final Axis scrollDirection;
  final FixedExtentScrollController controller;
  final double itemExtent;
  final double diameterRatio;
  final void Function(int) onSelectedItemChanged;
  const ListWheelScrollViewX({
    Key key,
    @required this.builder,
    @required this.itemExtent,
    this.controller,
    this.onSelectedItemChanged,
    this.scrollDirection = Axis.vertical,
    this.diameterRatio = 100000,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RotatedBox(
      quarterTurns: scrollDirection == Axis.horizontal ? 3 : 0,
      child: ListWheelScrollView.useDelegate(
        onSelectedItemChanged: onSelectedItemChanged,
        controller: controller,
        itemExtent: itemExtent,
        diameterRatio: diameterRatio,
        physics: FixedExtentScrollPhysics(),
        childDelegate: ListWheelChildBuilderDelegate(
          builder: (context, index) {
            return RotatedBox(
              quarterTurns: scrollDirection == Axis.horizontal ? 1 : 0,
              child: builder(context, index),
            );
          },
        ),
      ),
    );
  }
}

Answer 2

您可以使用内置的 ListWheelScrollView 通过将其与旋转框配对来执行此操作

RotatedBox(
   quarterTurns: -1,
   child: ListWheelScrollView(
   onSelectedItemChanged: (x) {
                  setState(() {
                    selected = x;
                  });
   },
   controller: _scrollController,
   children: List.generate(
                    itemCount,
                    (x) => RotatedBox(
                        quarterTurns: 1,
                        child: AnimatedContainer(
                            duration: Duration(milliseconds: 400),
                            width: x == selected ? 60 : 50,
                            height: x == selected ? 60 : 50,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                                color: x == selected ? Colors.red : Colors.grey,
                                shape: BoxShape.circle),
                            child: Text('$x')))),
                itemExtent: itemWidth,
              )),
    );

Full source Code here

我建议在解决 this issue 之前使用这种方法

这是输出

Answer 3

您可以使用此flutter软件包https://pub.dartlang.org/packages/carousel
有关更多参考，请参考此链接https://medium.com/flutter-io/creating-a-carousel-with-flutter-adf9a756e949

Answer 4

您可以在ListView和PageView以及NotificationListener的帮助下完成这项工作。 下面是我的相同代码-

import 'dart:math';
import 'package:flutter/material.dart';        
const SCALE_FRACTION = 0.9;
        const FULL_SCALE = 1.0;
        final PAGER_HEIGHT = SizeConfig.screenHeight*0.32;
        const PAGER_WIDTH = double.infinity;

        class PaymentWidget extends StatefulWidget {
          @override
          State<StatefulWidget> createState() => _PaymentState();
        }

        class _PaymentState extends State<PaymentWidget> {
          double viewPortFraction = 0.9;
          int currentPage = 1;
          double page = 2.0;

          PageController pageController;

          final List<String> _cardsImages = ['image/path1', 'image/path2',
            'image/path3', 'image/path4'];

          @override
          void initState() {
            pageController = PageController(
                initialPage: currentPage, viewportFraction: viewPortFraction);
            super.initState();
          }

          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: null,
              body: _creditCardsList()
        );
        }

       Widget _creditCardsList() {
            return ListView(
              shrinkWrap: true,
                  children: <Widget>[
                    Container(
                      height: PAGER_HEIGHT,
                      child: NotificationListener<ScrollNotification>(
                        onNotification: (ScrollNotification notification) {
                          if (notification is ScrollUpdateNotification) {
                            setState(() {
                              page = pageController.page;
                            });
                          }
                        },
                        child: PageView.builder(
                          onPageChanged: (pos) {
                            setState(() {
                              currentPage = pos;
                            });
                          },
                          physics: BouncingScrollPhysics(),
                          controller: pageController,
                          itemCount: _cardsImages.length,
                          itemBuilder: (context, index) {
                            final scale =
                            max(SCALE_FRACTION, (FULL_SCALE - (index - page).abs()) + viewPortFraction);
                            return CreditCardTile(
                                _cardsImages[index], scale);
                          },
                        ),
                      ),
                    ),
                  ],
            );

          }

        Widget CreditCardTile(String image, double scale) {
            return Align(
              alignment: Alignment.bottomCenter,
              child:Container(
                  height: PAGER_HEIGHT * scale,
                  width: PAGER_WIDTH * scale,
                  child: Card(
                    elevation: 5,
                    shadowColor: constColors.blueWhiteShade,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0)
                    ),
                    clipBehavior: Clip.antiAlias,
                    child: Image.asset(
                      image,
                      fit: BoxFit.cover,
                    ),
                  )
              ) ,
            );

          }

Answer 5

Transform.rotate(
  angle: -math.pi / 2,
  child: ListWheelScrollView()
}

使用Transform.rotate