所以,在这段代码中,我希望看到当前日期容器主屏幕(主屏幕),然后该容器的左侧最后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,
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

我试着在主屏幕居中,但我不能解决它.

推荐答案

我想你可以用ScrollController

ScrollController scrollController = ScrollController(
    initialScrollOffset: 150*10, // 150 is your container width * first 10 days
    keepScrollOffset: true,
  );

并将其与列表视图相关联:

ListView.builder(
controller: scrollerController,
....
)

Flutter相关问答推荐

如何在容器中移动图标按钮?

如何将图像从顶部和底部半向外设置为飘动

Android元数据为1.9.0,预期版本为1.7.1,如何解决flutter应用程序构建失败问题?

在Flutter 动中绘制ECG图

从底部开始固定,然后使其可拖曳Flutter

如何在抖动中预加载一条路由,或者即使在屏幕外也保持加载小工具?

我想在Flutter中画一个箭头,但我似乎无法填满空间

无法在仿真器上运行Flutter 项目-文件名太长错误

为什么我的Flutter 动画过渡没有发生?

尽管我的 url 链接正确,但 ArgumentError(无效参数:URI 文件中未指定主机:///)错误

Flutter:使用不包含导航器的上下文请求导航器操作

为 flutter app/firebase 保存 chatgpt api-key 的正确方法是什么

无法从一个页面导航到下一个页面 (Flutter)

在 Flutter 中更改喜欢按钮的 colored颜色

Flutter - firebase_auth_web 5.4.0 依赖于 intl ^0.17.0 但我必须使用更高版本 (intl ^0.18.0)

如何显示从 MariaDB 获取的数据到列表视图

如何获得Flutter 的时差?

如何在椭圆形图像周围添加边框?Flutter

无法列出 com.facebook.android:facebook-login -Facebook 登录问题的版本

检索 api 的值时,我得到_TypeError(类型'Null'不是'String'类型的子类型)