Как проще реализовать макет флаттера？ - PullRequest
Новая
       6

Как проще реализовать макет флаттера？

0 голосов
/ 15 января 2019

У меня есть эффект макета, я не знаю, как его проще реализовать? У меня есть шесть или N дочерних виджетов, помещенных в родительский виджет с двумя дочерними виджетами в строке, каждый виджет составляет 50% ширины родительского виджета, а высота - это высота / строки родительского виджета.

Я могу использовать столбец, расширенную строку, чтобы сделать это, но я не думаю, что это достаточно просто. Если мои дочерние виджеты являются промежуточными, я не знаю, как их динамически создавать.

Эффект макета, чего я хочу достичь:

Я хочу сделать это следующим псевдокодом Я могу сделать это в Android и iOS, но я не знаю, как это сделать с флаттером. 

var parentWidget = Widget()

for (var i = 0; i < 6; i++) {
    var child = Widget()
    parentWidget.add(child)
}

Флаттер реализован следующим образом. Я могу использовать столбец, расширенную строку, чтобы сделать это, но я не думаю, что это достаточно просто. Если мои дочерние виджеты не определены, я не знаю, как их создавать динамически. 

Expanded(
      child: Column(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Row(children: <Widget>[
              Expanded(child: Text("1"),),
              Expanded(child: Text("1"),),
            ],)
          ),
          Expanded(
            flex: 1,
            child:Row(children: <Widget>[
              Expanded(child: Text("1"),),
              Expanded(child: Text("1"),),
            ],),
          ),
          Expanded(
            flex: 1,
            child: Row(children: <Widget>[
              Expanded(child: Text("1"),),
              Expanded(child: Text("1"),),
            ],),
          )
        ],
      ),
    )

1 Ответ

0 голосов
/ 15 января 2019

Я нашел способ справиться с этим требованием, рассчитав ширину и высоту каждого дочернего виджета, а затем поместив их в обертку, чтобы упорядочить их 


class RowFixedWrap extends StatefulWidget {
  final double spacing;
  final double runSpacing;
  final int columnCount;
  final List<Widget> childern;

  RowFixedWrap(
      {Key key, this.spacing, this.runSpacing, this.columnCount, this.childern})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _FixedWrapState();
  }
}

class _FixedWrapState extends State<RowFixedWrap> {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        var itemWidth =
            (constraints.maxWidth - widget.spacing * (widget.columnCount - 1)) /
                widget.columnCount;
        var rows = widget.childern.length % widget.columnCount != 0
            ? (widget.childern.length ~/ widget.columnCount) + 1
            : (widget.childern.length ~/ widget.columnCount);
        var itemHeight =
            (constraints.maxHeight - widget.runSpacing * (rows - 1)) / rows;

        return Wrap(
            spacing: widget.spacing,
            runSpacing: widget.runSpacing,
            children: widget.childern.map((widget) {
              return SizedBox(
                width: itemWidth,
                height: itemHeight,
                child: widget,
              );
            }).toList());
      },
    );
  }
}

Expanded(
        child: Padding(
      padding: const EdgeInsets.all(10.0),
      child: RowFixedWrap(
        spacing: 10,
        runSpacing: 10,
        columnCount: 2,
        childern: <Widget>[
          Container(
            color: Colors.red,
          ),
          Container(
            color: Colors.red,
          ),
          Container(
            color: Colors.red,
          ),
          Container(
            color: Colors.red,
          ),
        ],
      ),
    ));
...