在颤动中禁用 ListWheelScrollView 中第一项的滚动

Question

如何停止ListWheelScrollView第一个索引的滚动。

预期输出：-

ListWheelScrollView当遇到禁用项目或 ListView 的第一个索引时应该停止滚动。滚动索引不应计算第一个索引，即它不应进一步移动或移动到禁用的索引。

预期输出 GIF : -

代码 ： -

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'List',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const List(),
    );
  }
}

class List extends StatefulWidget {
  const List({Key? key}) : super(key: key);
  @override
  _ListState createState() => _ListState();
}

class _ListState extends State<List> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("List"),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: Stack(
            alignment: AlignmentDirectional.center,
            children: [
              RotatedBox(
                quarterTurns: 1,
                child: SizedBox(
                  height: 600,
                  width: 800,
                  child: ListWheelScrollView(
                      itemExtent: 100,
                      physics: const FixedExtentScrollPhysics(),
                      onSelectedItemChanged: (value) {},
                      children: [
                        for (int i = 0; i < 4; i++) ...[
                          Container(
                            color: i != 3 ? Colors.green[200] : Colors.red[200],
                            height: 70,
                            width: 70,
                            alignment: Alignment.center,
                            child: RotatedBox(
                                quarterTurns: -1,
                                child: Text(i != 3 ? "Enabled" : "Disabled")),
                          )
                        ]
                      ]),
                ),
              ),
              const Positioned(top: 440, child: Icon(Icons.arrow_circle_up))
            ],
          ),
        ));
  }
}

提供了一种解决方案：-

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'List',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const ScrollingList(),
    );
  }
}

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

  @override
  _ScrollingListState createState() => _ScrollingListState();
}

class _ScrollingListState extends State<ScrollingList> {
  final controller = FixedExtentScrollController();

  final children = [
    for (int i = 0; i < 6; i++) ScrollingListItem(enabled: i != 0)
  ];

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("List"),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: Stack(
            alignment: AlignmentDirectional.center,
            children: [
              RotatedBox(
                quarterTurns: 1,
                child: SizedBox(
                  height: 600,
                  width: 800,
                  child: ListWheelScrollView(
                    controller: controller,
                    itemExtent: 100,
                    physics: const FixedExtentScrollPhysics(),
                    onSelectedItemChanged: (idx) {
                      if (!children[idx].enabled) {
                        controller.animateToItem(
                          idx + 1,
                          duration: const Duration(milliseconds: 500),
                          curve: Curves.linear,
                        );
                      }
                    },
                    children: children,
                  ),
                ),
              ),
              const Positioned(top: 440, child: Icon(Icons.arrow_circle_up))
            ],
          ),
        ));
  }
}

class ScrollingListItem extends StatelessWidget {
  final bool enabled;

  const ScrollingListItem({super.key, required this.enabled});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: enabled ? Colors.green[200] : Colors.red[200],
      height: 70,
      width: 70,
      alignment: Alignment.center,
      child: RotatedBox(
        quarterTurns: -1,
        child: Text(
          enabled ? "Enabled" : "Disabled",
        ),
      ),
    );
  }
}

它有一个错误，当列表轮移动到禁用元素时，最后一个元素（最左边的容器）会闪烁：-

Answer 1

以下代码与您提供的解决方案类似，但几乎没有变化。

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'List',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const ScrollingList(),
    );
  }
}

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

  @override
  _ScrollingListState createState() => _ScrollingListState();
}

class _ScrollingListState extends State<ScrollingList> {
  final controller = FixedExtentScrollController(initialItem: 1);

  final children = [
    for (int i = 0; i < 6; i++) ScrollingListItem(enabled: i != 0)
  ];

  void scrollListener() {
    if (controller.selectedItem == 1) {
      if (controller.position.userScrollDirection == ScrollDirection.forward) {
        controller.jumpToItem(1);
      }
    }
  }

  @override
  void initState() {
    super.initState();
    controller.addListener(scrollListener);
  }

  @override
  void dispose() {
    controller.removeListener(scrollListener);
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("List"),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: Stack(
            alignment: AlignmentDirectional.center,
            children: [
              RotatedBox(
                quarterTurns: 1,
                child: SizedBox(
                  height: 600,
                  width: 800,
                  child: ListWheelScrollView(
                    controller: controller,
                    itemExtent: 100,
                    physics: const FixedExtentScrollPhysics(),
                    // onSelectedItemChanged: (idx) {
                    //   if (!children[idx].enabled) {
                    //     controller.animateToItem(
                    //       idx + 1,
                    //       duration: const Duration(milliseconds: 500),
                    //       curve: Curves.linear,
                    //     );
                    //   }
                    // },
                    children: children,
                  ),
                ),
              ),
              const Positioned(top: 440, child: Icon(Icons.arrow_circle_up))
            ],
          ),
        ));
  }
}

class ScrollingListItem extends StatelessWidget {
  final bool enabled;

  const ScrollingListItem({super.key, required this.enabled});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: enabled ? Colors.green[200] : Colors.red[200],
      height: 70,
      width: 70,
      alignment: Alignment.center,
      child: RotatedBox(
        quarterTurns: -1,
        child: Text(
          enabled ? "Enabled" : "Disabled",
        ),
      ),
    );
  }
}

希望能帮助到你。谢谢 ：）