提问人:Pranav Fulkari 提问时间:10/3/2023 更新时间:10/3/2023 访问量:12
Flutter:在 circle_wheel_scroll 中,代码只有在调用 onSelectedItemChanged 时才有效
Flutter: In circle_wheel_scroll, code works only if onSelectedItemChanged gets called
问:
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 回调函数时有效运行。如果没有此回调,代码可能无法按预期运行。此代码的预期用途似乎是创建一个圆形水平日期滚动条,这意味着一个用户界面元素,允许用户在连续循环中滚动日期。
非常感谢您在此事上的帮助!
答: 暂无答案
评论