有谁熟悉通过垂直圆形可滚动列表通过边缘淡入来选择数字以形成圆形幻觉，就像套件号码锁一样

Question

我需要一个数字选择列表，它应该像套房号码锁定系统一样垂直旋转或旋转，用户应该能够上下滚动，并且列表应该像套房号码锁定系统一样循环滑动。

应有 6 个数字垂直排列，每个数字包含 0-9 个数字，并可上下滑动。垂直旋转的最顶部和最底部元素应该在滚动时消失，这给用户一种像循环滑动的错觉，就像套件箱号码锁旋转一样。

实际上我正在处理应用程序的票证选择流程。

请检查我随此描述提供的要求图片

Answer 1

试试这个：

import "package:flutter/material.dart";

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String passCode = "123456";
  List<int> intList = <int>[0, 0, 0, 0, 0, 0];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Container(
              height: 50,
              color: Colors.amber,
            ),
            Column(
              children: <Widget>[
                Expanded(
                  child: Row(
                    children: <Widget>[
                      for (int i = 0; i < 6; i++)
                        Expanded(
                          child: ListWheelScrollView.useDelegate(
                            itemExtent: 100,
                            perspective: 0.01,
                            overAndUnderCenterOpacity: 0.32,
                            onSelectedItemChanged: (int value) {
                              intList[i] = value;
                            },
                            childDelegate: ListWheelChildLoopingListDelegate(
                              children: <Widget>[
                                for (int i = 0; i < 10; i++) Text(i.toString())
                              ],
                            ),
                          ),
                        ),
                    ],
                  ),
                ),
              ],
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: ElevatedButton(
                onPressed: () {
                  String strFinalResult = "";
                  final String strResult1 = intList[0].toString();
                  final String strResult2 = intList[1].toString();
                  final String strResult3 = intList[2].toString();
                  final String strResult4 = intList[3].toString();
                  final String strResult5 = intList[4].toString();
                  final String strResult6 = intList[5].toString();
                  strFinalResult = strResult1 +
                      strResult2 +
                      strResult3 +
                      strResult4 +
                      strResult5 +
                      strResult6;
                  print("Result1: $strResult1");
                  print("Result2: $strResult2");
                  print("Result3: $strResult3");
                  print("Result4: $strResult4");
                  print("Result5: $strResult5");
                  print("Result6: $strResult6");
                  print(strFinalResult == passCode ? "Pass" : "Fail");
                },
                child: const Text("Check"),
              ),
            )
          ],
        ),
      ),
    );
  }
}