플린이가 레이아웃을 공부하고 있다.
플러터로 몇몇 화면을 그리다 보면 참을 수 없는 가독성이 발생한다.
그 이유는 미친 듯한 코드 길이인데, 세로형 모니터 없이는 보기 힘들 정도이다.
그래서 Custom Widget을 만들면 줄일 수 있다고 해서 알아보려고 한다. 설명은
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const AppBarTitle(),
),
),
);
}
}
class AppBarTitle extends StatelessWidget {
const AppBarTitle({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const SizedBox(
width: 120,
child: Row(
children: [Text("안녕"), Icon(Icons.arrow_drop_down)],
);
}
}
매우 간단했다. StatelessWidget을 만들어 클래스 인스턴스 만들면 된다고 한다.
근데 더 화나는 건 build 메서드를 오버라이드를 해야 하고 이상한 멤버 변수도 선언해야 한다는 것이다.
이를 지우고 싶은데, 이는 플러터 만든 사람이 정했다고 한다.. 이 방법 없애려고 이것저것 해봤는데 안되더라..
순서는 다음과 같다.
1. 커스텀 위젯은 Class로 만들어야 한다.
2. StatelessWidget 상속받아 구현하는 게 매우 간편하다.
3. 클래스 생성자를 정의하는 부분으로보인다. (지금은 몰라도됨)
const AppBarTitle({Key? key}) : super(key: key);
4. Dart는 함수 키워드가 필요 없음. build 함수가 있어야 위젯으로 인정된다.
리턴 값으로 Widget 타입을 리턴하면 된다. 아마 위젯들의 부모 중 하나로 보인다.
오버라이드는 다형성쓰는 것 같은데, Dart는 객체지향 언어인가 보다.
@override
Widget build(BuildContext context)
실은 변수, 함수 문법으로 축약할 수 있다고 한다.
var a = SizedBox(
width: 120,
child: Row(
children: [Text("안녕"), Icon(Icons.arrow_drop_down)],
));
이는 성능상 이슈가 있음. 그래서 보통 변수에는 상수 값을 넣는다.
static을 관리하는 별도의 클래스를 만들고 사용해도 될 듯 하다.
커스텀 위젯의 단점은 state 관리가 힘들어진다고 한다.
재사용이 많은 UI들만 커스텀 위젯화를 만들거나 큰 페이지를 커스텀 위젯으로 만들어도 된다고 한다.
+ 스크롤바가 필요하면 ListView 쓸 수 있다.
ListView를 쓰면 메모리 절약기능도 있고, 스크롤 위치도 감시할 수 있고, 자동 스크롤바가 생긴다 한다.
댓글