Question

我已经在Text（）小部件所在的位置打印了数据，并且看到数据确实在更新，但是显示的文本是先前的数据。当我进入同一页面上的单独文本字段并按出时，然后会更新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

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

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),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

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

示例：

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

文本小部件：onTap Flutter之后，Text（）不会使用新数据更新显示

2 个答案: