如何使 ListWheelScrollView 水平

Question

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

Answer 1

编辑：我已经基于此发布了包。

pub.dev/packages/list_wheel_scroll_view_x

这是我的解决方法。

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.

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

完整源代码在这里

我建议使用此方法，直到此问题得到解决

这是输出

Answer 3

您可以使用这个 flutter 包https://pub.dev/packages/carousel_slider。它还有一个非常有用的描述和一些示例来了解它的外观。并且它也兼容 dart 2.0。