Flutter: 거의 모든 것이 위젯입니다.

Flutter에서는 거의 모든 것이 위젯이며, 높은 수준의 성능으로 강력한 시각적 레이아웃을 렌더링하는 프레임워크의 기본 요소입니다.

아래 항목에 대한 이 짧은 게시물 접근법:

위젯;

빌드 방법을 구현합니다.

위젯 상태.

위젯

위젯은 프레임워크 렌더링 위대한 인터페이스의 핵심에 중요한 부분입니다. 위젯은 사용자 인터페이스를 선언하고 빌드하는 방법입니다. Flutter 앱은 위젯으로 시작하며 기본적으로 Flutter 앱에서 볼 수 있는 사용자 인터페이스는 모두 위젯입니다. Flutter에는 Android 및 IOS용으로 보이는 네이티브 플랫폼을 빌드하는 데 도움이 되는 Material 및 Cupertino라는 두 가지 기본 디자인과 많은 기본 위젯이 함께 제공됩니다.

위젯은 일반적으로 다른 많은 위젯으로 구성됩니다. Flutter에는 Text , Image 및 Icon 과 같이 인터페이스에서 볼 수 있는 표시 및 레이아웃 위젯이 있습니다. 그리고 레이아웃 위젯은 Column , Row 및 Stack 과 같은 보이는 위젯을 정렬합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const SpiderMan());
}

class SpiderMan extends StatelessWidget {
  const SpiderMan({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: const [
        Text(
          'spider-man: no way home',
          textDirection: TextDirection.ltr,
        ),
        Image(
          image: AssetImage('assets/spider_man.jpg'),
          width: 300,
        ),
      ],
    );
  }
}

주어진 위젯을 표시하는 runApp 함수로 앱을 시작합니다. SpiderMan 위젯 및 디스플레이Text 및 Image 위젯, 즉 보이는 위젯을 표시하고 이들을 켜짐Column 에 맞춥니다. 이전 코드의 결과:

빌드 메소드 구현

Flutter가 위젯을 렌더링해야 하는 경우 build 메서드를 호출합니다. 이를 통해 사용자 인터페이스의 일부에서 위젯 시각적 표현을 설명합니다.

Widget build(BuildContext context)

Flutter 프레임워크는 이 위젯이 트리에 삽입되거나 종속성이 변경될 때 이 메서드를 호출합니다. 사용자가 UI와 상호 작용하고 위젯의 상태가 변경되는 경우와 마찬가지로 메서드build가 다시 빌드됩니다.
SpiderMan 위젯을 기억하세요. Image 및 Text 을 표시하지만 build 메서드는 각각 위젯을 표시하기 위해 RawImage 및 RichText과 같은 새 위젯을 트리에 삽입합니다. 여기 트리가 있습니다.

위젯 상태

Flutter에는 많은 위젯과 생성 가능성이 있습니다. 위젯은 예를 들어 사용자 상호작용이 발생했기 때문에 변경이 필요합니다. 그러나 모든 위젯에 변경이 필요한 것은 아닙니다. Flutter에서는 이를 두 가지 더 인기 있는 종류의 위젯, 즉 각각 상태 저장 및 상태 비저장이라고 부릅니다.

기본적으로 s*tateful* 위젯은 동적입니다. 위젯에 유용한 것은 사용자가 작업을 수행하거나 데이터를 수신할 때 변경될 수 있습니다.

import 'package:flutter/material.dart';

void main() => runApp(
      const MaterialApp(
        home: Scaffold(
          body: Counter(),
        ),
      ),
    );

class Counter extends StatefulWidget {
  const Counter();

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

class _CounterState extends State<Counter> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text(
            'Counter $counter',
            style: Theme.of(context).textTheme.headline3,
            textDirection: TextDirection.ltr,
          ),
          TextButton.icon(
            onPressed: () {
              setState(() {
                counter++;
              });
            },
            icon: const Icon(Icons.plus_one),
            label: const Text(
              'plus',
              textDirection: TextDirection.ltr,
            ),
          ),
        ],
      ),
    );
  }
}

stateful 위젯을 구현하려면 위젯을 정의하는 StatefulWidget과 위젯 및 위젯의 메서드build()에 대한 상태를 저장하는 State라는 두 클래스를 생성해야 합니다. 위젯 상태를 변경하려면 Flutter가 위젯을 다시 빌드하도록 호출setState()합니다.

상태 비저장 위젯은 변경할 수 없는 위젯입니다. 절대 변경되지 않습니다. stateless 위젯을 구현하려면 build() 메서드가 포함된 StatelessWidget을 생성해야 합니다. SpiderMan 위젯으로 롤백하면 상태 비저장입니다. 또 다른 예는 Text , Container 및 Icon 입니다.

결론

위젯은 Flutter 프레임워크의 중요한 부분이며 훌륭한 인터페이스를 만듭니다. 같은 프레임워크는 많은 기본 및 쉬운 사용자 지정 위젯으로 개발자를 돕습니다. 그러나 이는 광범위한 주제이며 요소 및 렌더링 트리, 애니메이션 및 상태 관리를 통해 더 자세히 알아볼 수 있습니다.