첫 번째 Flutter 항목 - 카운터 예
이 예에서 주요Dart 코드는lib/main입니다.dart 파일에서 다음 예제의 소스 코드를 살펴보겠습니다.
import 'package:flutter/material.dart';
//
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
//
primarySwatch: Colors.blue,
),
//
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
분석하다.
1. 패키지 가져오기
import 'package:flutter/material.dart';
이 행 코드는 Material UI 구성 요소 라이브러리를 가져오는 역할을 합니다.Material은 표준적인 모바일과 웹의 시각적 디자인 언어로 Flutter는 기본적으로 풍부한 Material 스타일의 UI 구성 요소를 제공합니다.
2. 입구 적용
void main() => runApp(new MyApp());
3. 응용 구조
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
//
title: 'Flutter Demo',
theme: new ThemeData(
//
primarySwatch: Colors.blue,
),
//
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
4. 첫 페이지
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State {
...
}
MyHomePage는 Stateful Widget 클래스를 계승하여 상태가 있는widget(Stateful widget)이라는 것을 나타내는 응용 프로그램의 첫 페이지입니다.이제 Stateful widget과 Stateless widget은 두 가지 차이가 있다고 간단히 생각할 수 있습니다.
_MyHomePageState 클래스는 MyHomePage 클래스에 해당하는 상태 클래스입니다.여기를 보면 세심한 독자들이 MyApp류와 달리 MyHomePage류에build 방법이 없다는 것을 발견할 수 있다. 대신build 방법이 옮겨졌다MyHomePageState 방법에서 왜 이렇게 하는지 의문을 남기고 전체 코드를 분석한 후에 해답을 드리겠습니다.
다음은 우리가MyHomePageState에는 다음이 포함됩니다.
(1) 상태.
int _counter = 0;
_counter는 화면의 오른쪽 아래 테이프를 저장합니다 "➕”번호 버튼 클릭 횟수의 상태.
(2) 상태의 자증 함수를 설정합니다.
void _incrementCounter() {
setState(() {
_counter++;
});
}
버튼을 클릭하면 이 함수를 호출합니다. 이 함수의 역할은 먼저 증가합니다counter, 그리고 setState 방법을 호출합니다.set State 방법의 역할은 Flutter 프레임워크를 알리는 것입니다. 상태가 바뀌었습니다. Flutter 프레임워크는 알림을 받은 후build 방법을 실행하여 새로운 상태에 따라 인터페이스를 재구성합니다. Flutter는 이 방법을 최적화하여 재집행을 빠르게 하기 때문에 업데이트가 필요한 모든 것을 재구성할 수 있습니다. 각widget을 수정할 필요가 없습니다.
(3) UI 인터페이스 구축
UI 인터페이스를 구축하는 논리는build 방법에서 MyHomePage를 처음 만들 때MyHomePageState 클래스가 생성됩니다. 초기화가 완료되면 Flutter 프레임워크는widget의build 방법을 사용하여widget 트리를 구축하고, 최종적으로widget 트리를 장치 화면에 렌더링합니다.그러니까 보자MyHomePageState의build 방법에서 무슨 일을 했는지:
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
);
}
현재, 우리는 전체 절차를 연결합니다: 오른쪽 아래에 있는floatingActionButton 단추가 눌리면 호출됩니다incrementCounter,incrementCounter 중 우선 자동 증가카운터 (상태) 를 누르고 set State는 Flutter 프레임워크의 상태가 바뀌었다는 것을 알립니다. 이어서 Flutter는build 방법을 사용해서 새로운 상태로 UI를 재구성하여 장치 화면에 표시합니다.
StatefulWidget이 아니라build 방법을 State에 두는 이유는 무엇입니까?
이것은 주로 개발의 유연성을 위한 것이다.build () 메서드를 StatefulWidget에서 사용할 경우 다음 두 가지 문제가 발생합니다.
Widget build(BuildContext context, State state){
//state.counter
...
}
이렇게 하면 State의 모든 상태를 공개된 상태로 성명해야만 State 클래스에서 외부에 접근할 수 있지만 상태를 공개로 설정하면 상태가 더 이상 은밀성을 가지지 않고 의존할 수 있으며 상태의 수정은 통제할 수 없게 된다.build () 방법을 State에 놓으면 구축 과정이 상태에 직접 접근할 수 있어 편리합니다.
class MyAnimationWidget extends AnimatedWidget{
@override
Widget build(BuildContext context, State state){
// AnimatedWidget _animatedWidgetState，
// AnimatedWidget _animatedWidgetState
//
super.build(context, _animatedWidgetState)
}
}
이렇게 하는 것은 분명히 불합리하다. 왜냐하면
요약하면 StatefulWidget에 대해build 방법을 State에 두면 개발에 큰 유연성을 가져다 줄 수 있음을 알 수 있다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
