Flutter에서 Column의 자식 사이의 공간

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(),
  ]
)

이 문제를 다른 방법으로 해결할 수 있습니다.

당신이 사용하는 경우 행 / 열을 당신은 사용에 있습니다 mainAxisAlignment : MainAxisAlignment.spaceEvenly를

당신이 사용하는 경우 랩 위젯을 사용해야 , 5 간격 : runSpacing 10,

어디에서나 SizeBox ()를 사용할 수 있습니다.

열 기본적으로 높이가 없습니다. 열을 컨테이너에 래핑하고 특정 높이를 컨테이너에 추가 할 수 있습니다. 그런 다음 아래와 같이 사용할 수 있습니다.

Container(
   width: double.infinity,//Your desire Width
   height: height,//Your desire Height
   child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
         Text('One'),
         Text('Two')
      ],
   ),
),

여기에 많은 답변이 있지만 모두가 사용해야 할 가장 중요한 답변을 여기에 넣겠습니다.

1. 기둥

 Column(
          children: <Widget>[
            Text('Widget A'), //Can be any widget
            SizedBox(height: 20,), //height is space betweeen your top and bottom widget
            Text('Widget B'), //Can be any widget
          ],
        ),

2. 랩

     Wrap(
          direction: Axis.vertical, // We have to declare Axis.vertical, otherwise by default widget are drawn in horizontal order
            spacing: 20, // Add spacing one time which is same for all other widgets in the children list
            children: <Widget>[
              Text('Widget A'), // Can be any widget
              Text('Widget B'), // Can be any widget
            ]
        )

Column(children: <Widget>[
   Container(margin: EdgeInsets.only(top:12, child: yourWidget)),
   Container(margin: EdgeInsets.only(top:12, child: yourWidget))
]);

열의 자식 사이에 SizedBox () 위젯을 사용해야 할 수도 있습니다. 유용 할 수 있기를 바랍니다.

도우미 기능을 사용하여 각 자식 뒤에 간격을 추가 할 수도 있습니다.

List<Widget> childrenWithSpacing({
  @required List<Widget> children,
  double spacing = 8,
}) {
  final space = Container(width: spacing, height: spacing);
  return children.expand((widget) => [widget, space]).toList();
}

따라서 반환 된 목록은 열의 자식으로 사용될 수 있습니다.

Column(
  children: childrenWithSpacing(
    spacing: 14,
    children: [
      Text('This becomes a text with an adjacent spacing'),
      if (true == true) Text('Also, makes it easy to add conditional widgets'),
    ],
  ),
);

같은 목표를 위해 도우미 기능을 통해 아이들을 실행시키는 것이 잘못되었거나 성능 저하가 있는지 확실하지 않습니다.

크기 상자는 경우에 도움이되지 않으며 전화기가 가로 모드입니다.

body: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
           child: Container(
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
        Expanded(
           child: Container(
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
        Expanded(
           child: Container(
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
      ],
     )