Flutter가 모든 위젯을 다시 빌드/다시 그리도록 강제하는 방법은 무엇입니까?

이전에 우리는 how to pass data to a Stateful widget in Flutter을 기반으로 하는 다양한 기사를 살펴보았으므로 이 기사에서는 Flutter에서 강제로 Flutter에서 모든 위젯을 다시 빌드/다시 그리는 방법을 살펴보겠습니다.

같은 준비가 되셨습니까?

Flutter가 Flutter에서 모든 위젯을 다시 빌드/다시 그리도록 강제하는 방법은 무엇입니까?

자식이 읽을 수 있는 데이터가 있지만 모든 자식의 생성자 인수에 데이터를 명시적으로 전달하고 싶지 않은 이러한 유형의 사용 사례는 일반적으로 상속된 위젯을 호출합니다. flutter는 데이터에 의존하는 위젯을 자동으로 추적하고 변경된 트리 부분을 다시 빌드합니다.

로캘 변경을 처리하도록 설계된 LocaleQuery 위젯이 있습니다. 이러한 솔루션을 구현하고 Flutter 모바일 애플리케이션 개발을 위해 Flutter Agency의 전문 Flutter 개발자에게 문의할 수 있습니다.

로케일 변경 이외의 것을 추적하려는 경우 확장하는 자체 클래스를 만들고inherited widget 앱 루트 근처의 계층 구조에 포함할 수 있습니다. 부모는 자식이 액세스할 수 있는 GlobalKey로 키가 설정된 상태 저장 위젯이어야 합니다.

stateful widget의 상태는 배포하려는 데이터를 소유하고 setState를 호출하는 변경 방법을 노출해야 합니다. 하위 위젯이 State의 데이터를 변경하려는 경우 전역 키를 사용하여 State(key.currentState)에 대한 포인터를 가져오고 이에 대한 메서드를 호출할 수 있습니다.

데이터를 읽으려면 Inherited Widget 하위 클래스의 static of(context) 메서드를 호출하면 State가 setState를 호출할 때마다 이러한 위젯을 다시 빌드해야 한다고 Flutter에 알릴 수 있습니다.

위젯에는 setState() 메서드가 있어야 하며 이 메서드가 호출될 때마다 위젯이 다시 그려집니다.
https://api.flutter.dev/flutter/widgets/State/setState.html

예를 들어 MaterialApp을 위젯으로 래핑하여 위젯을 사용할 수 있습니다.

Widget build(BuildContext context) {
  return AppBuilder(builder: (context) {
    return MaterialApp(
      ...
    );
  });
}

다음을 사용하여 앱이 다시 빌드하도록 지시할 수 있습니다.

AppBuilder.of(context).rebuild();

빌드 방법에서 RebuildAllChildren 함수를 호출하고 컨텍스트에 전달합니다.

@override
Widget build(BuildContext context) { 
  rebuildAllChildren(context);
  return ...
}
void rebuildAllChildren(BuildContext context) {
  void rebuild(Element el) {
    el.markNeedsBuild();
    el.visitChildren(rebuild);
  }
  (context as Element).visitChildren(rebuild);
}

이것은 모든 어린이를 방문하여 재건이 필요한 것으로 표시합니다. 이 코드를 위젯 트리의 최상위 위젯에 넣으면 모든 것이 다시 빌드됩니다.

전체 위젯 트리를 새로 고치는 것은 비용이 많이 들 수 있으며 사용자의 눈앞에서 새로 고칠 때 달콤해 보이지 않을 수 있습니다. 그래서 이러한 목적을 위해 flutter에는 ValueListenableBuilder 클래스가 있습니다. 목적에 필요한 위젯 중 일부만 다시 빌드하고 값비싼 위젯은 건너뛸 수 있습니다.

ValueListenableBuilder flutter 문서에서 문서를 볼 수 있습니다.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
  final ValueNotifier _counter = ValueNotifier(0);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("ValueListenableBuilder")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button this many times:'),
            ValueListenableBuilder(
              valueListenable: _counter,
              builder: (context, value, _) {
                // This builder will only get called when the _counter
                // is updated.
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text(
                      '$value',
                      style: const TextStyle(fontSize: 25),
                    ),
                  ],
                );
              },
              // The child parameter is most helpful if the child is
              // expensive to build and does not depend on the value from
              // the notifier.
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.plus_one),
        onPressed: () => _counter.value += 1,
      ),
    );
  }
}

또한 setState(() {});

새로 고침이 필요할 때마다: 트릭을 수행하는 states_rebuilder라는 pub 패키지도 있습니다.

산출

결론:

읽어주셔서 감사합니다.

이 기사에서는 Force Flutter를 통해 모든 위젯을 다시 빌드/다시 그립니다.

계속 배우도록 !!! 계속 설레발!!!

FlutterAgency.com은 Flutter 기술 및 Flutter 개발자 전용 포털 플랫폼입니다. 포털에는 Flutter 위젯 가이드, Flutter 프로젝트, 코드 라이브러리 등과 같은 Flutter의 멋진 리소스가 가득합니다.