HIDI Flutter Challenge (2) Row & Column Widget

hello_hidiยท2021๋…„ 8์›” 29์ผ
0

HIDI's Flutter Challenge

๋ชฉ๋ก ๋ณด๊ธฐ
2/12
post-thumbnail

> Row & Column Widget

> Row ์œ„์ ฏ

  • ์ˆ˜ํ‰ ๋ฐฉํ–ฅ ๋ ˆ์ด์•„์›ƒ ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๋Š” ์œ„์ ฏ
  • children ์†์„ฑ์„ ๊ฐ€์ง : ๋งŽ์€ ์œ„์ ฏ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Œ
  • ์Šคํฌ๋กคX => ListView ์‚ฌ์šฉ ๊ณ ๋ ค
  • ์ž์‹์ด ํ™•์žฅ๋˜์–ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๊ฐ€๋กœ ๊ณต๊ฐ„์„ ์ฑ„์šฐ๋„๋ก ํ•˜๋ ค๋ฉด ์ž์‹์„ Expanded ์œ„์ ฏ์œผ๋กœ ๋ž˜ํ•‘

Row({
      Key? key,
      MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
      MainAxisSize mainAxisSize = MainAxisSize.max,
      CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
      TextDirection? textDirection,
      VerticalDirection verticalDirection = VerticalDirection.down,
      TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
      List children = const [],
    }) : super(
      children: children,
      key: key,
      direction: Axis.horizontal,
      mainAxisAlignment: mainAxisAlignment,
      mainAxisSize: mainAxisSize,
      crossAxisAlignment: crossAxisAlignment,
      textDirection: textDirection,
      verticalDirection: verticalDirection,
      textBaseline: textBaseline,
    );

>> Row ์œ„์ ฏ ์ฃผ์š” ์†์„ฑ

  • List children : ๋งŽ์€ ์œ„์ ฏ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Œ
  • MainAxisAlignment mainAxisAlignment : ์ฃผ์ถ•์„ ๊ธฐ์ค€์œผ๋กœ ์ •๋ ฌ (๊ฐ€๋กœ์ถ• ๊ธฐ์ค€ ์ •๋ ฌ)
  • CrossAxisAlignment crossAxisAlignment : ์ฃผ์ถ•์ด ์•„๋‹Œ ์ถ•์„ ๊ธฐ์ค€์œผ๋กœ ์ •๋ ฌ (์„ธ๋กœ์ถ• ๊ธฐ์ค€ ์ •๋ ฌ)

> Column ์œ„์ ฏ

  • ์ˆ˜์ง ๋ฐฉํ–ฅ ๋ ˆ์ด์•„์›ƒ ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๋Š” ์œ„์ ฏ
  • children ์†์„ฑ์„ ๊ฐ€์ง : ๋งŽ์€ ์œ„์ ฏ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Œ
  • ์Šคํฌ๋กคX => ListView ์‚ฌ์šฉ ๊ณ ๋ ค
  • ์ž์‹์ด ํ™•์žฅ๋˜์–ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๊ฐ€๋กœ ๊ณต๊ฐ„์„ ์ฑ„์šฐ๋„๋ก ํ•˜๋ ค๋ฉด ์ž์‹์„ Expanded ์œ„์ ฏ์œผ๋กœ ๋ž˜ํ•‘

Column({
      Key? key,
      MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
      MainAxisSize mainAxisSize = MainAxisSize.max,
      CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
      TextDirection? textDirection,
      VerticalDirection verticalDirection = VerticalDirection.down,
      TextBaseline? textBaseline,
      List children = const [],
    }) : super(
      children: children,
      key: key,
      direction: Axis.vertical,
      mainAxisAlignment: mainAxisAlignment,
      mainAxisSize: mainAxisSize,
      crossAxisAlignment: crossAxisAlignment,
      textDirection: textDirection,
      verticalDirection: verticalDirection,
      textBaseline: textBaseline,
    );

>> Column ์œ„์ ฏ ์ฃผ์š” ์†์„ฑ

  • List children : ๋งŽ์€ ์œ„์ ฏ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Œ
  • MainAxisAlignment mainAxisAlignment : ์ฃผ์ถ•์„ ๊ธฐ์ค€์œผ๋กœ ์ •๋ ฌ (์„ธ๋กœ์ถ• ๊ธฐ์ค€ ์ •๋ ฌ)
  • CrossAxisAlignment crossAxisAlignment : ์ฃผ์ถ•์ด ์•„๋‹Œ ์ถ•์„ ๊ธฐ์ค€์œผ๋กœ ์ •๋ ฌ (๊ฐ€๋กœ์ถ• ๊ธฐ์ค€ ์ •๋ ฌ)
profile
์•ˆ๋‡ฝํฌ๋””

0๊ฐœ์˜ ๋Œ“๊ธ€