Flutter:在 circle_wheel_scroll 中,代码只有在调用 onSelectedItemChanged 时才有效

Flutter: In circle_wheel_scroll, code works only if onSelectedItemChanged gets called

提问人:Pranav Fulkari 提问时间:10/3/2023 更新时间:10/3/2023 访问量:12

问:

import 'package:flutter/material.dart';
import 'package:circle_wheel_scroll/circle_wheel_scroll_view.dart'
    as circle_wheel;
import 'package:intl/intl.dart';

import 'package:flutter_svg/svg.dart';

class Calender extends StatefulWidget {
  final void Function(String) callBack;
  const Calender({
    super.key,
    required this.callBack,
  });

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

class _CalenderState extends State<Calender> {
  List<String> dateList = [];
  int initialSelectedItem = 50; // Default to the current date index
  DateTime selectedDate = DateTime.now();

  @override
  void initState() {
    super.initState();

    DateTime currentDate = DateTime.now();
    for (int i = -50; i <= 50; i++) {
      DateTime date = currentDate.add(Duration(days: i));
      String formattedDate = DateFormat('dd').format(date);
      dateList.add(formattedDate);
    }
  }

  Widget _buildItem(int i) {
    bool isCurrentDate = i == initialSelectedItem % dateList.length;
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(0),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(40),
          child: Container(
            width: 80,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              // border: Border.all(width: 0.6),
              color: isCurrentDate ? Colors.green : Color(0xFF1E1E26),
            ),
            child: Center(
              child: Padding(
                padding: const EdgeInsets.all(3),
                child: Text(
                  dateList[i % dateList.length],
                  style: TextStyle(

                      color: Colors.white,
                      fontSize: 12,
                      fontWeight: FontWeight.bold),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF1C1C23),
      body: Stack(
        children:<Widget> [
          SizedBox(
            child: Column(
              children: [
                Stack(
                  children: <Widget>[
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        SizedBox(
                          height: MediaQuery.of(context).size.height / 4,
                          width: MediaQuery.of(context).size.width * 1,
                          child: Opacity(
                            opacity: 0.1,
                            child: Image.asset(
                              "assets/images/bg.png",
                              fit: BoxFit.fill,

                            ),
                          ),
                        ),
                      ],
                    ),
                    Positioned(
                      left: MediaQuery.of(context).size.width / 2.1,
                      top: MediaQuery.of(context).size.height / 5.9,
                      child: SizedBox(
                        child: SvgPicture.asset('assets/images/Group.svg'),
                      ),
                    ),
                    Positioned(
                      left: 2.5,
                      right: 2.5,
                      child: SizedBox(
                        child: Padding(
                          padding: const EdgeInsets.only(top: 50.0),
                          child: SvgPicture.asset(
                            'assets/images/Subtract.svg',
                            fit: BoxFit.fill,
                            color: Color(0xFF2C2C3A),
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                      top: MediaQuery.of(context).size.height /22,
                      left: MediaQuery.of(context).size.width /2.8,
                      child: Center(
                        child: Container(
                          height: 25,
                          width: 111,
                          child: ClipPath(
                            clipper: MyCustomClipper(),
                            child: Container(
                              decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  colors: [Color(0xFF2C2C3A), Color(0xFF23232E)],
                                  begin: Alignment.centerLeft,
                                  end: Alignment.centerRight,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                      left: MediaQuery.of(context).size.width /2.18,
                      top: MediaQuery.of(context).size.height * 0.1,
                      child: Container(
                        width: 30,
                        height: 30,
                        decoration: BoxDecoration(
                          color: Colors.green,
                          shape: BoxShape.circle,
                        ),
                      ),
                    ),
                    Positioned(
                      top: MediaQuery.of(context).size.height / 22,
                      left: MediaQuery.of(context).size.width / 3.3,
                      child: SizedBox(
                        height: 30,
                        width: 150,
                        child: Column(
                          children: <Widget>[
                            Padding(
                              padding: const EdgeInsets.only(top: 3.0),
                              child: Center(
                                child: Text(
                                  DateFormat.yMMMd().format(
                                    selectedDate,
                                  ),
                                  style: TextStyle(
                                    fontSize: 10,
                                    color: Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Positioned(
                      top: MediaQuery.of(context).size.height * 0.00001,
                      left: 0,
                      right: 0,
                      bottom: 0,
                      child: Container(
                        height: 180, // Set your desired height here
                        child: circle_wheel.CircleListScrollView(
                          axis: Axis.horizontal,
                          itemExtent: 20,
                          physics: circle_wheel.CircleFixedExtentScrollPhysics(),
                          controller: circle_wheel.FixedExtentScrollController(
                            initialItem: initialSelectedItem,
                          ),
                          children: List.generate(
                            100,
                            _buildItem,
                          ),
                          onSelectedItemChanged: (int index) {
                            setState(() {
                              initialSelectedItem = index;
                              selectedDate = DateTime.now().add(
                                Duration(days: index - 50),
                              ); // Update the selected date
                              final formattedDate = DateFormat('dd MMM yyyy, EEEE')
                                  .format(selectedDate);
                              widget.callBack!(formattedDate);
                            });
                          },
                          radius: MediaQuery.of(context).size.width * .95,
                        ),
                      ),
                    ),

                  ],
                ),
              ],
            ),
          ),
        ]

      ),
    );
  }
}

在 circle_wheel_scroll 函数的上下文中提供的代码旨在在调用 onSelectedItemChanged 回调函数时有效运行。如果没有此回调,代码可能无法按预期运行。此代码的预期用途似乎是创建一个圆形水平日期滚动条,这意味着一个用户界面元素,允许用户在连续循环中滚动日期。

非常感谢您在此事上的帮助!

Flutter android-studio 回调 状态管理

评论


答: 暂无答案