재사용 가능한 위젯을 생성하기 위한 함수와 클래스의 차이점은 무엇입니까?

질문 제목:

재사용 가능한 위젯을 생성하기 위한 함수와 클래스의 차이점은 무엇입니까?

질문 내용:

 

StatelessWidget

을 서브클래싱하는 대신 일반 함수를 사용하여 위젯을 만드는 것이 가능하다는 것을 깨달았습니다 . 예를 들면 다음과 같습니다.

Widget function({ String title, VoidCallback callback }) {
  return GestureDetector(
    onTap: callback,
    child: // some widget
  );
}

이는 완전한 클래스보다

훨씬

적은 코드가 필요하기 때문에 흥미롭습니다 . 예:

class SomeWidget extends StatelessWidget {
  final VoidCallback callback;
  final String title;

  const SomeWidget({Key key, this.callback, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
      return GestureDetector(
        onTap: callback,
        child: // some widget
      );
  }
}

그래서 저는 궁금했습니다: 위젯을 생성하기 위한 함수와 클래스 사이의 구문 외에 다른 점이 있습니까? 그리고 함수를 사용하는 것이 좋은 습관입니까?

해결 답변:

편집

: Flutter 팀은 이제 이 문제에 대한 공식적인 입장을 취하고 클래스가 바람직하다고 말했습니다. https://www.youtube.com/watch?v=IOyq-eTRhvo 참조

---

요약:

재사용 가능한

위젯 트리를 만들려면 함수보다 클래스를 사용하는 것이 좋습니다.

편집

: 일부 오해를 만회하기 위해 : 이것은 문제를 일으키는 기능이 아니라 일부를 해결하는 클래스입니다.함수가 같은 일을 할 수 있다면 Flutter는

StatelessWidget 을 가지지 않을 것입니다.

마찬가지로 재사용할 수 있도록 만든 공용 위젯을 주로 대상으로 합니다. 개인 함수가 한 번만 사용되는 것은 그다지 중요하지 않습니다. 이 동작을 인식하는 것은 여전히 ​​좋습니다.

---

클래스 대신 함수를 사용하는 것에는 중요한 차이점이 있습니다. 즉, 프레임워크는 함수를 인식하지 못하지만 클래스를 볼 수 있습니다.다음 "위젯" 기능을 고려하십시오.

Widget functionWidget({ Widget child}) {
  return Container(child: child);
}

이 방법으로 사용:

functionWidget(
  child: functionWidget(),
);

그리고 클래스는 동일합니다.

class ClassWidget extends StatelessWidget {
  final Widget child;

  const ClassWidget({Key key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: child,
    );
  }
}

그렇게 사용 :

new ClassWidget(
  child: new ClassWidget(),
);

---

서류상으로는 둘 다 정확히 같은 일을 하는 것처럼 보입니다. Create 2

Container

, 하나는 다른 하나에 중첩됩니다. 그러나 현실은 조금 다릅니다.함수의 경우 생성된 위젯 트리는 다음과 같습니다.

Container
  Container

클래스를 사용하는 동안 위젯 트리는 다음과 같습니다.

ClassWidget
  Container
    ClassWidget
      Container

이는 위젯을 업데이트할 때 프레임워크가 작동하는 방식을 변경하기 때문에 중요합니다.

그것이 중요한 이유

기능을 사용하여 위젯 트리를 여러 위젯으로 분할하면 버그에 노출되고 일부 성능 최적화를 놓치게 됩니다.함수를 사용하여 버그가 발생 한다는 보장은

없지만

클래스를 사용하면 이러한 문제에 직면하지 않는다는

보장 이 있습니다.

다음은 문제를 더 잘 이해하기 위해 직접 실행할 수 있는 Dartpad의 몇 가지 대화형 예제입니다.

• https://dartpad.dev/?id=bcae5878ccced764b35dd9a659a593db
  
  이 예는 앱을 기능으로 분할하여 실수로 다음과 같은 것을 깨뜨릴 수 있는 방법을 보여줍니다.
  AnimatedSwitcher
• https://dartpad.dev/?id=481a2c301c2e4bed6c30ba651d01bacb
  이 예제는 클래스가 위젯 트리를 보다 세분화하여 다시 빌드하여 성능을 향상시키는 방법을 보여줍니다.
• https://dartpad.dev/?id=8bcb85ba535102bed652e5bf1540ac3b
  이 예제는 함수를 사용하여 어떻게 BuildContext를 잘못 사용하고 InheritedWidgets(예: 테마 또는 공급자)를 사용할 때 버그에 직면하는지 보여줍니다.

결론

다음은 함수와 클래스 사용의 차이점에 대한 선별된 목록입니다.

1. 클래스:

• 성능 최적화 허용(const 생성자, 보다 세분화된 재구축)
• 두 개의 서로 다른 레이아웃 간 전환이 리소스를 올바르게 처리하는지 확인합니다(함수는 일부 이전 상태를 재사용할 수 있음).
• 핫 리로드가 제대로 작동하는지 확인합니다(함수를 사용하면 핫 리로드가 중단될 수 showDialogs있음).
• 위젯 검사기에 통합됩니다.
  • ClassWidget화면에 무엇이 있는지 이해하는 데 도움이 되는 devtool에 의해 표시되는 위젯 트리에서 볼 수 있습니다.
  • 위젯에 전달된 매개변수가 무엇인지 출력하기 위해 debugFillProperties 를 재정의할 수 있습니다 .
• 더 나은 오류 메시지
  예외가 발생하면(예: ProviderNotFound) 프레임워크는 현재 빌드 중인 위젯의 이름을 제공합니다. 함수 + 에서만 위젯 트리를 분할한 경우 Builder오류에 유용한 이름이 없습니다.
• 키를 정의할 수 있습니다
• 컨텍스트 API를 사용할 수 있습니다.

2. 기능:

• 코드가 적습니다(코드 생성 functional_widget 을 사용하여 해결할 수 있음 ).

전반적으로 이러한 이유 때문에 위젯을 재사용하기 위해 클래스보다 함수를 사용하는 것은 나쁜 습관으로 간주됩니다.

 

당신

은 할 수

있지만 미래에 당신을 물릴 수 있습니다.