SetState 不会立即更新

Question

我是 flutter 的新手，我在这里遇到了问题。

我正在开发一个安排用餐的应用程序，我希望当他到达小部件确认约会时，日历会显示为灰色且已禁用

预订区小部件

import 'package:app/widgets/booking/datepicker.dart';
import 'package:app/widgets/booking/pageone.dart';
import 'package:flutter/material.dart';

bool confirmationPage = false;

class BookingArea extends StatefulWidget {
  const BookingArea({Key? key}) : super(key: key);

  @override
  _BookingAreaState createState() => _BookingAreaState();
}

class _BookingAreaState extends State<BookingArea> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Row(
        children: [
          Container(
            width: 600,
            height: 350,
            color: Colors.amber,
            child: const PageOne(),
          ),
          Container(
            foregroundDecoration: confirmationPage
                ? const BoxDecoration(
                    color: Colors.grey,
                    backgroundBlendMode: BlendMode.saturation,
                  )
                : null,
            width: 300,
            height: 300,
            child: const DatePicker(),
          ),
        ],
      ),
    );
  }
}

确认页面小部件

import 'package:app/widgets/booking/booking_area.dart';
import 'package:flutter/material.dart';

class PageOne extends StatefulWidget {
  const PageOne({Key? key}) : super(key: key);

  @override
  _PageOneState createState() => _PageOneState();
}

class _PageOneState extends State<PageOne> {
  @override
  Widget build(BuildContext context) {
    setState(() {
      confirmationPage = true;
    });
    return const Center(
      child: Text("Pagina 1"),
    );
  }
}

发生的情况是，当我在 PageOne 上设置 setState 时，它仅在我通过路由“重新启动”页面时应用状态（更改小部件颜色）。

我想要的是，当他翻到第一页时，他会立即更改日历的颜色

抱歉英语不好

谢谢:)

Answer 1

那是因为您仅通过此 setState((){}) 调用更新您的 PageOne。

它不会重建父窗口小部件。

这将是快速的解决方案，但我强烈建议寻找复杂的状态管理解决方案

import 'package:app/widgets/booking/datepicker.dart';
import 'package:app/widgets/booking/pageone.dart';
import 'package:flutter/material.dart';

class BookingArea extends StatefulWidget {
  const BookingArea({Key? key}) : super(key: key);

  @override
  _BookingAreaState createState() => _BookingAreaState();
}

class _BookingAreaState extends State<BookingArea> {

  bool confirmationPage = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Row(
        children: [
          Container(
            width: 600,
            height: 350,
            color: Colors.amber,
            child: PageOne(onInit:() {
              setState((){
                confirmation = true;
              });
            }),
          ),
          Container(
            foregroundDecoration: confirmationPage
                ? const BoxDecoration(
                    color: Colors.grey,
                    backgroundBlendMode: BlendMode.saturation,
                  )
                : null,
            width: 300,
            height: 300,
            child: const DatePicker(),
          ),
        ],
      ),
    );
  }
}

import 'package:app/widgets/booking/booking_area.dart';
import 'package:flutter/material.dart';

class PageOne extends StatefulWidget {
  const PageOne({Key? key, required this.onInit}) : super(key: key);
  final VoidCallback onInit;
  @override
  _PageOneState createState() => _PageOneState();
}

class _PageOneState extends State<PageOne> {


  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      widget.onInit();
    });
  }


  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("Pagina 1"),
    );
  }
}

SetState 不会立即更新

SetState does not update immediately

flutter

flutter-web