Question

我有版面设计效果，我不知道如何更轻松地实现它？我有六个或N个子窗口小部件，放置在一个父窗口小部件中，每行有两个子窗口小部件，每个窗口小部件是父窗口小部件宽度的50％，高度是父窗口小部件的高度/行。

我可以使用列，行扩展来做到这一点，但我认为这还不够简单。如果我的子窗口小部件是中间的，我不知道如何动态创建它们。

我想要实现的布局效果：

我想做的方法是下面的伪代码我可以在Android和iOS上做到这一点，但我不知道该如何应对。

var parentWidget = Widget()

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

Flutter的实现如下。我可以使用column，rowexpand来做到这一点，但我认为这还不够简单。如果我的子小部件不确定，我不知道如何动态创建它们。

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

Answer 1

我想出了一种方法来解决此要求，方法是计算每个子小部件的宽度和高度，然后将它们包裹起来以自行布置


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

如何更轻松地实现抖动布局？

1 个答案: