Есть ли способ "присоединить" виджеты Flutter к Padding?

Question

У меня есть виджеты Row of Flutter, которые я хочу разделить с помощью Padding, но только между виджетами. Вроде как поведение функции join () для списков, где строка, к которой вы хотите присоединиться, добавляется только между элементами, а не в конце списка. Например. Для чего-то вроде этого:

var square = new Container(height: 50.0, width: 50.0; color: Colors.pink,);
return new Row(
  children: <Widget>[
    square,
    square,
    square,
  ],
);

Я получу ряд из 3 розовых квадратов без промежутков между ними. Мне нужен более программный / встроенный способ Flutter для этого:

const _rightPadding = const Padding(padding: const EdgeInsets.only(right: 16.0));
var square = new Container(height: 50.0, width: 50.0; color: Colors.pink,);
return new Row(
  children: <Widget>[
    square,
    rightPadding,
    square,
    rightPadding,
    square,
    // note there is no padding after this third square
  ],
);

Я мог бы добавить правый отступ к свойству padding внутри моего виджета square, но тогда у меня будет дополнительный отступ в конце строки. Я мог бы добавить оператор if, который проверяет, являюсь ли я последним виджетом в списке, и не добавляю отступы для этого, хотя это дополнительный код, и я надеюсь на что-то более эффективное. :)

Я заметил, что в Wrap Widget есть runSpacing и {{ X1}} - это именно то, что я ищу, но только для строк и столбцов.

padding flutter

0

Mary 3 Янв 2018 в 01:07

Answer 1

Я поискал в документации по запросу Row и не смог найти то, что вы ищете (хотя оно могло быть там, и я просто не могу его увидеть). Один из способов сделать это программно - просто иметь функцию, которая принимает список элементов и возвращает этот список с промежуточным отступом, но не на последнем элементе. Возможно что-то вроде:

List<Widget> createRowChildrenWithPadding(List<Widget> widgets, Padding pading) {
    var joined = List<Widget>();

    for (var i = 0;  i < widgets.length; i++) {
        if ( i != widgets.length - 1)  {
            joined.add(widgets[i]);
            joined.add(padding);
        } else {
            joined.add(widgets[i]);
        }
    }
    return joined;
}

Затем вы можете просто вызвать эту функцию и передать список для своей строки и присвоить возвращаемое значение именованному параметру children для строк. Дайте мне знать, если у вас возникнут вопросы, надеюсь, это поможет!

3

marktechson 3 Янв 2018 в 00:27

Answer 2

Вы ищете свойство MainAxisAlignment, а значение MainAxisAlignment.spaceBetween точно выполняет свою работу. Здесь вы найдете некоторую документацию по этому поводу.

Итак, чтобы использовать такое свойство, вы должны зафиксировать ширину вашей строки (заранее зная, сколько элементов фиксированного размера вы включаете). Что-то вроде этого:

var square = new Container(height: 50.0, width: 50.0, color: Colors.pink,);
List<Widget> squareChildren = [square, square, square];
double rowWidth = squareChildren.length*50.0 + (squareChildren.length-1)*16.0;
return new Container(
  width: rowWidth,
  child: new Row(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: squareChildren,
  ),
);

1

Fabio Veronese 4 Янв 2018 в 23:39

Есть ли способ "присоединить" виджеты Flutter к Padding?

2 ответа

Похожие вопросы

Новые вопросы

padding