如何在表格日历标题下方添加文本"Pick a day"( Select 一天)?

我做了很多研究,但我不知道怎么做.我有谷歌和做堆积溢出的研究,但没有任何相关的信息.

如何在表格日历标题下添加文本"Pick a day" 2022年11月>?

enter image description here

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';

class Journal extends StatefulWidget {
  const Journal({super.key});



 @override
  State<Journal> createState() => _JournalState();
}

class _JournalState extends State<Journal> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Padding(
          padding:
              const EdgeInsets.only(left: 19, top: 8, bottom: 10, right: 19),
          child: IconButton(
            onPressed: () {},
            icon: const Icon(Icons.arrow_back_ios,
                color: Color.fromARGB(255, 0, 97, 146)),
          ),
        ),
        title: const Text('Meds-On-Time',
            style: TextStyle(
                fontWeight: FontWeight.w400,
                fontFamily: 'Inter',
                fontSize: 18)),
        centerTitle: true,
        actions: [
          Padding(
            padding:
                const EdgeInsets.only(left: 19, top: 8, bottom: 10, right: 10),
            child: InkWell(
              onTap: () {},
              child: Image.asset(
                'assets/images/action_Icons.png',
                width: 24,
                height: 24,
              ),
            ),
          ),
        ],
      ),
      body: Container(
        constraints: const BoxConstraints.expand(),
        decoration: const BoxDecoration(
          image: DecorationImage(
              image: AssetImage("assets/images/background_onTime.png"),
              fit: BoxFit.cover),
        ),
        child: Column(
          children: [
            TableCalendar(
              locale: "en_US",
              rowHeight: 40,
              headerStyle: const HeaderStyle(
                formatButtonVisible: false,
                titleCentered: true,
              ),
              focusedDay: DateTime.utc(2023, 11, 24),
              firstDay: DateTime.utc(2010, 11, 30),
              lastDay: DateTime.utc(2043, 11, 30),
              currentDay: DateTime.utc(2023, 11, 24),
            ),
            Text("Pick a date to view your journal"),
          ],
        ),
      ),
    );
  }
}

推荐答案

您想要在标题中添加一个标题"Pick a day".

现在,看一下documentation of table_calendar,就会发现你正在使用的是HeaderStyle.

您可以做的是修改titleTextFormatter,其描述为:

用于自定义页眉的标题文本(例如,使用不同的DateFormat).

这意味着,您可以返回带有正确日期的String.

但是,因为您还想使用标题"Pick a day",所以可以返回字符串形式的日期,也可以返回文本"Pick a day"

headerStyle: HeaderStyle(
            titleTextFormatter: (date, locale) {
              // coming from the intl package
              return DateFormat.yMMMM(locale).format(date) +
                  "\n" +
                  "pick a date";
            },
            titleCentered: true,
          ),

enter image description here

您需要导入intl包才能正确设置日期格式.


下面是一个完整的可运行代码片段:

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:table_calendar/table_calendar.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: TableCalendar(
          headerVisible: true,
          calendarFormat: CalendarFormat.month,
          locale: "en_US",
          rowHeight: 40,
          headerStyle: HeaderStyle(
            titleTextFormatter: (date, locale) {
              // coming from the intl package
              return DateFormat.yMMMM(locale).format(date) +
                  "\n" +
                  "pick a date";
            },
            titleCentered: true,
          ),
          focusedDay: DateTime.utc(2023, 11, 24),
          firstDay: DateTime.utc(2010, 11, 30),
          lastDay: DateTime.utc(2043, 11, 30),
          currentDay: DateTime.utc(2023, 11, 24),
        ),
      ),
    );
  }
}

Flutter相关问答推荐

在Flutter中为不受约束的小部件制作动画

在保持标高=1的情况下更改AppBar立面 colored颜色 /遮罩

Android Studio中的Ffltter&;Couchbase:进程C:/Program Files/Git/bin/bash以非零退出值35结束

Flutter API请求BadState响应

Ffmpeg_kit_fltter:^6.0.3版权问题

如何在 Flutter 中以背景 colored颜色 制作圆圈的一部分

创建混合 TextWidget 和 TextFieldWidget

Flutter屏幕适配 - 在模拟器和真实手机上文本尺寸不同

reactive_flutter_BLE - 应用找到设备但无法连接(并读取 BLE 数据)

如何设置行中项目之间的空格相等?

flutter 在文本字段中更改部分文本选定 colored颜色

在向 Google Route API 发送 HTTP Post 请求期间发生错误,

alert 对话框内的 ListView 显示空的透明窗口

如何在 flutter 的 onChanged(更改字符)处更改 TextField 边框 colored颜色 ?

Flutter - 使用 pin 进行身份验证

CircleAvatar 在 ListTile 中领先

在 flutter 中使用 StreamBuilder 在文本字段中键入时显示过滤记录

如何使用 Navigator 2.0 导航到任何页面?

Flutter ListView builder 未使用新数据更新

如何在Flutter 中专注于列表视图中最新添加的项目