Flutter按月分周展示无时间日期及列表单行按钮隐藏功能咨询

单条按钮点击仅隐藏当前行按钮 #

原因 #

原代码使用全局单一变量viewVisible控制所有列表项按钮可见性，所有行共用同一份状态，修改后所有行同步生效。

解决方法 #

使用List<bool>存储每个列表项独立的可见状态，点击时仅修改对应索引的状态值。
初始化时添加：

List<bool> buttonVisible = List.generate(7, (index) => true);

修改Visibility的visible属性和点击事件：

Visibility(
  visible: buttonVisible[index],
  child: ElevatedButton(
    child: Text('登　録'),
    style: ElevatedButton.styleFrom(primary: Colors.indigo[700]),
    onPressed: () {
      setState(() {
        buttonVisible[index] = false;
      });
      ButtonClicked();
      _awaitReturnValueFromSecondScreen(context);
    },
  )
)

不含时间的日期+星期展示 #

当前使用的DateFormat配置已支持输出无时间的日期与星期，如需展示中文星期，指定中文locale即可：

// 需先在pubspec.yaml引入intl依赖，并导入相关包
import 'package:intl/intl.dart';
import 'package:intl/date_symbol_data_local.dart';

// 初始化时调用日期本地化初始化
@override
void initState() {
  super.initState();
  initializeDateFormatting('zh_CN', null);
}

// 格式化配置，输出示例：06/17 (周一)
DateFormat formatter = DateFormat('MM/dd (E)', 'zh_CN');

按周展示、自动切换下一周 #

实现逻辑 #

• 存储当前周的起始日期，默认以周一为周起始，可自行调整为周日
• 页面加载/刷新时判断当前时间是否超过当前周的最后一天，是则自动将周起始向后推7天
• 按周起始生成连续7天的日期列表

代码实现 #

// 存储当前周起始日期
DateTime currentWeekStart = DateTime.now().subtract(Duration(days: DateTime.now().weekday - 1));
List<String> items = [];
List<bool> buttonVisible = [];
DateFormat formatter = DateFormat('MM/dd (E)', 'zh_CN');

// 生成周日期列表，自动切换下一周
void generateWeekItems() {
  DateTime now = DateTime.now();
  // 当前周最后一天
  DateTime currentWeekEnd = currentWeekStart.add(const Duration(days: 6));
  // 若当前时间已超过本周最后一天，自动切到下一周
  if (now.isAfter(currentWeekEnd)) {
    currentWeekStart = currentWeekStart.add(const Duration(days: 7));
  }
  // 生成7天日期
  items = List.generate(7, (i) {
    DateTime date = currentWeekStart.add(Duration(days: i));
    return formatter.format(date);
  });
  // 同步重置按钮可见状态
  buttonVisible = List.generate(7, (index) => true);
  setState(() {});
}

内容的提问来源于stack exchange，提问作者Last First