所以,在这段代码中,我希望看到当前日期容器主屏幕(主屏幕),然后该容器的左侧最后10天容器和该容器的右侧即将到来的10天容器将出现,我可以滚动查看.我怎么能做到呢?在这个代码中,最左边的容器是出现的.下面是代码:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Date Scrolling',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: DateScrollingScreen(),
);
}
}
class DateScrollingScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Date Scrolling'),
),
body: Center(
child: Container(
height: 300,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 21, // 10 past days, current day, and 10 upcoming days
itemBuilder: (BuildContext context, int index) {
DateTime currentDate = DateTime.now();
DateTime date = currentDate.add(Duration(days: index - 10));
bool isCurrentDate = index == 10;
return Container(
width: 150, // Width of each date container
margin: EdgeInsets.symmetric(horizontal: 5),
decoration: BoxDecoration(
border: Border.all(
color: isCurrentDate ? Colors.blue : Colors.grey,
width: 2,
),
borderRadius: BorderRadius.circular(10),
),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'${date.day}/${date.month}',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: isCurrentDate ? Colors.blue : Colors.black,
),
),
SizedBox(height: 5),
Text(
isCurrentDate ? 'Today' : '',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: isCurrentDate ? Colors.blue : Colors.black,
),
),
],
),
);
},
),
),
),
);
}
}
我试着在主屏幕居中,但我不能解决它.