文本小部件:在onTapFlutter之后，Text()不会用新数据更新显示

Question

我已经打印了Text((小部件所在的数据，我看到数据确实在更新，但是，显示的Text是以前的数据。当我进入同一页面上的一个单独的文本字段并按下out时，Text((小部件就会更新。setState已经被textBuilder使用，但它没有更新显示。我也在使用这个软件包来显示日历。https://pub.dev/packages/table_calendar

import 'package:flutter/rendering.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'table_calendar.dart';
class NewEventPage extends StatefulWidget {
static const String id = 'new_event_page';
@override
_NewEventPageState createState() => _NewEventPageState();
}
class _NewEventPageState extends State<NewEventPage> {
String year = DateFormat.y().format(DateTime.now()).toString();
String month = DateFormat.MMMM().format(DateTime.now()).toString();
CalendarController _calendarController;
yearTextFormat(year){
return TextStyle(
fontFamily: 'Chivo Light',
fontSize: 22.0,
letterSpacing: 1.0,
color: Color(0xff212a3d),);
}
monthTextFormat(month){
return TextStyle(
fontFamily: 'Chivo Bold',
fontSize: 22.0,
letterSpacing: 1.0,
color: Color(0xff65a1c0),);
}
@override
void initState() {
super.initState();
_calendarController = CalendarController();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Builder(
builder: (context) => Container(
child: SingleChildScrollView(
child: Column(
children: [
Container(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
child: Container(
child: TableCalendar(
headerStyle: HeaderStyle(
titleTextBuilder: (date, locale) {
year = DateFormat.y(locale).format(date).toString();
month = DateFormat.MMMM(locale).format(date).toString();
return '';
},
...
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(month + " ", style: monthTextFormat(month),),
Text(year, style: yearTextFormat(year),),
],
),
), //yearTextFormat(year),
],
),
),
],
),
),
),
),
);
}
}

Answer 1

您应该将年份和月份放在setState函数中以更新屏幕。

示例：

titleTextBuilder: (date, locale) {
setState(() {
year = DateFormat.y(locale).format(date).toString();
month = DateFormat.MMMM(locale).format(date).toString();
});
return '';
},

Answer 2

您可以使用正在使用的TableCalander插件的内置onDaySelected属性，通过调用setState来更新文本小部件。

import 'package:flutter/cupertino.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:table_calendar/table_calendar.dart';
class NewEventPage extends StatefulWidget {
static const String id = 'new_event_page';
@override
_NewEventPageState createState() => _NewEventPageState();
}
class _NewEventPageState extends State<NewEventPage> {
String year = DateFormat.y().format(DateTime.now()).toString();
String month = DateFormat.MMMM().format(DateTime.now()).toString();
CalendarController _calendarController;
yearTextFormat(year) {
return TextStyle(
fontFamily: 'Chivo Light',
fontSize: 22.0,
letterSpacing: 1.0,
color: Color(0xff212a3d),
);
}
monthTextFormat(month) {
return TextStyle(
fontFamily: 'Chivo Bold',
fontSize: 22.0,
letterSpacing: 1.0,
color: Color(0xff65a1c0),
);
}
@override
void initState() {
super.initState();
_calendarController = CalendarController();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Builder(
builder: (context) => Container(
child: SingleChildScrollView(
child: Column(
children: [
Container(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
child: Container(
child: TableCalendar(
calendarController: _calendarController,
locale: Intl.systemLocale,
onDaySelected: (date, locale) {
setState(() {
year = DateFormat.y(locale).format(date).toString();
month = DateFormat.MMMM(locale).format(date).toString();
});
},
))),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
month + " ",
style: monthTextFormat(month),
),
Text(
year,
style: yearTextFormat(year),
),
],
),
), //yearTextFormat(year),
],
),
),
],
),
),
),
),
);
}
}