[dart] Flutter에서 Column의 자식 사이의 공간

Program / 글쓴이

Column두 TextField위젯이 자식으로 있는 위젯이 있고 두 위젯 사이에 약간의 공간을두고 싶습니다.

나는 이미 시도 mainAxisAlignment: MainAxisAlignment.spaceAround했지만 결과가 내가 원하는 것이 아닙니다.

답변

이 Padding두 위젯 사이에 위젯을 사용 하거나 위젯으로 Padding위젯을 래핑 할 수 있습니다 .

최신 정보

SizedBox 위젯은 두 위젯 사이에 사용하여 두 위젯 사이에 공간을 추가 할 수 있으며 패딩 위젯보다 코드를 더 읽기 쉽게 만듭니다.

전의:

Column(
  children: <Widget>[
    Widget1(),
    SizedBox(height: 10),
    Widget2(),
  ],
),

답변

다음 과 같이 위젯 사이 SizedBox에 특정을 넣을 수 있습니다 height.

Column(
  children: <Widget>[
    FirstWidget(),
    SizedBox(height: 100),
    SecondWidget(),
  ],
),

위젯을 래핑하는 것보다 이것을 선호하는 이유는 Padding무엇입니까? 가독성! 시각적 상용구가 적고 들여 쓰기가 적으며 코드는 일반적인 읽기 순서를 따릅니다.

답변

Wrap()대신 위젯을 사용 Column()하여 자식 위젯 사이에 공간을 추가 할 수 있습니다.

Wrap(
  spacing: 20, // to apply margin in the main axis of the wrap
  runSpacing: 20, // to apply margin in the cross axis of the wrap
  children: <Widget>[
     Text('child 1'),
     Text('child 2')
  ]
)

답변

패딩을 사용하여 다음과 같이 포장하십시오.

Column(
  children: <Widget>[
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World!'),
  ),
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World2!'),
  )
]);

Container (padding …) 또는 SizeBox (height : xx)를 사용할 수도 있습니다. 마지막 것이 가장 일반적이지만 위젯의 공간을 관리하려는 방법에 따라 달라집니다. 공간이 실제로 위젯의 일부인 경우 패딩을 사용하고 목록에 sizebox를 사용하는 것을 좋아합니다.

답변

이를 수행하는 방법은 여러 가지가 있습니다. 여기에 몇 가지를 나열하겠습니다.

  1. 사용 Container하고 약간의 높이를 제공 하십시오 .

    Column(
  children: <Widget>[
    Widget1(),
    Container(height: 10), // set height
    Widget2(),
  ],
)

  2. 사용하다 Spacer

    Column(
  children: <Widget>[
    Widget1(),
    Spacer(), // use Spacer
    Widget2(),
  ],
)

  3. 사용하다 Expanded

    Column(
  children: <Widget>[
    Widget1(),
    Expanded(child: SizedBox()), // use Expanded
    Widget2(),
  ],
)

  4. 사용하다 mainAxisAlignment

    Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround, // mainAxisAlignment
  children: <Widget>[
    Widget1(),
    Widget2(),
  ],
)

  5. 사용하다 Wrap 

    Wrap(
  direction: Axis.vertical, // make sure to set this
  spacing: 20, // set your spacing
  children: <Widget>[
    Widget1(),
    Widget2(),
  ],
)

답변

Column(
  children: <Widget>[
    FirstWidget(),
    Spacer(),
    SecondWidget(),
  ]
)

Spacer는 [Flexible] 위젯에 삽입 할 유연한 공간을 만듭니다. (칼럼처럼)

답변

코드 가독성을 위해 위에서 SizedBox를 사용 하는 것과 동일한 방식으로 Padding 위젯을 동일한 방식으로 사용할 수 있으며 Column의 자식에 대한 부모 위젯으로 만들 필요가 없습니다.

Column(
  children: <Widget>[
    FirstWidget(),
    Padding(padding: EdgeInsets.only(top: 40.0)),
    SecondWidget(),
  ]
)