dart 如何实现水平滚动部件与捕捉和指针显示项目挑选

baubqpgj  于 2023-06-19  发布在  其他
关注(0)|答案(1)|浏览(106)

如何使用Flutter实现提供的图像中显示的滚动行为?我尝试使用ListWheelScroll,但它不适合我。

nszi6y05

nszi6y051#

您可以使用clickable_list_wheel_view包来创建这种选择器。它类似于ListWheelScroll,也检测onTap或Click功能。为了更好地了解它,请查看官方网站。我添加了一个小例子来展示如何使用它。
完整代码:-

import 'package:clickable_list_wheel_view/clickable_list_wheel_widget.dart';
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> {
  final _scrollController = FixedExtentScrollController(initialItem: 4);

  int itemLength = 6;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("List"),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(
                height: 20,
                width: 300,
                child: RotatedBox(
                  quarterTurns: 1,
                  child: ClickableListWheelScrollView(
                    scrollController: _scrollController,
                    itemHeight: 80,
                    itemCount: itemLength,
                    onItemTapCallback: (index) {},
                    child: ListWheelScrollView.useDelegate(
                      controller: _scrollController,
                      itemExtent: 80,
                      physics: const FixedExtentScrollPhysics(),
                      overAndUnderCenterOpacity: 1.0,
                      perspective: 0.002,
                      onSelectedItemChanged: (index) {},
                      childDelegate: ListWheelChildBuilderDelegate(
                        builder: (context, index) {
                          return Container(
                            alignment: Alignment.center,
                            child: RotatedBox(
                                quarterTurns: -1,
                                child: Text(
                                  '${(itemLength - index) * 5} MIN',
                                  textAlign: TextAlign.center,
                                  style: const TextStyle(fontSize: 20),
                                )),
                          );
                        },
                        childCount: itemLength,
                      ),
                    ),
                  ),
                ),
              ),
              const Icon(
                Icons.arrow_drop_up,
                size: 35,
              )
            ],
          ),
        ));
  }
}

输出:-

相关问题