Простір між дітьми Колони у Флаттері

У мене є 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!'),
  )
]);

Ви також можете використовувати контейнер (заповнення ...) або SizeBox (висота: 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 створює гнучкий простір для вставки у віджет [Гнучкий]. (Як стовпець)

Так само, як SizedBox використовується вище для читання коду, ви можете використовувати віджет Padding таким же чином, і не потрібно робити його батьківським віджетом для будь-якого з нащадків Стовпця

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

Ви можете вирішити цю проблему по-іншому.

Якщо ви використовуєте рядок / стовпець, тоді вам доведеться використовувати mainAxisAlignment: MainAxisAlignment.spaceEvenly

Якщо ви використовуєте Wrap віджет ви повинні використовувати runSpacing: 5, інтервал: 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),
            ),
          ),
        ),
      ],
     )