flutter自定义table_calendar

最新推荐文章于 2025-03-26 14:37:34 发布

名字被你们想完了

最新推荐文章于 2025-03-26 14:37:34 发布

阅读量1.1k

点赞数 13

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.csdn.net/asdf11111_____/article/details/143234584

版权

flutter自定义table_calendar

没想到吧，我又开始写flutter了，因为我现在是写海外APP的，uniapp虽然简单快捷，但是对于海外某些sdk的接入难度会直线飙升，原生集成，封装原生方法，封装原生视图之类的，本来是个web前端小菜鸡，不会Android，现在也算是略懂一点点Android了。因为海外很多sdk对flutter的支持度还算可以，又因之前闲暇之余有搞过flutter Hello World 的项目经历，加之二月到六月因为工作需要，将一个Android app转鸿蒙原生开发，所以熟悉flutter也还算快，所以就开始搞flutter开发了。

扯远了，进入正题，因为项目涉及到日历相关的，就在网上找了一下，最后选择了 table_calendar，因为这个出了新的，删除了某些api，又新增了某些api，导致部分自定义功能搜索出来的代码还是之前的版本，所以最后参考官网实现了，做个简单的记录，方便后续查阅（其实官方文档里面都有…）。

1. 基本使用

按照官方文档，写入必要的一些参数，就行了

class MyHomePage extends StatefulWidget {
   
  const MyHomePage({
   super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
   
  DateTime currentTime = DateTime.now();

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: TableCalendar(
          // 可选时间区间的开始时间
          firstDay: DateTime.utc(2000, 1, 1),
          // 可选时间区间的结束时间
          lastDay: DateTime.utc(DateTime.now().year + 10, 12, 31),
          // 当前获取焦点的时间
          focusedDay: currentTime,
        ),
      ),
    );
  }
}

这样就得到了一个很简单的日历组件

在这里插入图片描述

接下来我们尝试更改一些基本的样式

1.1 修改头部样式

使用 headerStyle 属性，我们可以很快的更改头部的样式

// 其他代码就省略...
TableCalendar(
  // 可选时间区间的开始时间
  firstDay: DateTime.utc(2000, 1, 1),
  // 可选时间区间的结束时间
  lastDay: DateTime.utc(DateTime.now().year + 10, 12, 31),
  // 当前获取焦点的时间
  focusedDay: currentTime,
  headerStyle: const HeaderStyle(
    // 将头部的padding和margin设置为0
    headerPadding: EdgeInsets.zero,
    headerMargin: EdgeInsets.zero,
    // 设置头部显示的日期居中
    titleCentered: true,
    // 设置头部显示的日期文本样式
    titleTextStyle: TextStyle(
      fontSize: 20,
      fontWeight: FontWeight.bold
    ),
    // 隐藏formatButton
    formatButtonVisible: false,
    // 设置左右切换按钮的margin
    leftChevronMargin: EdgeInsets.only(left: 40

最低0.47元/天解锁文章