如何更轻松地实现一个 Flutter 布局？

Posted 2023-02-23

【中文标题】如何更轻松地实现一个 Flutter 布局？

【英文标题】：How to implement a flutter layout more easily？

【发布时间】：2019-06-09 01:28:30

【问题描述】：

我有一个布局效果，不知道怎么实现更方便？我有六个或 N 个子小部件，放置在一个父小部件中，每行有两个子小部件，每个小部件是父小部件宽度的 50%，高度是父小部件的高度/行。

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

我想要达到的布局效果：

我想这样做的方式是以下伪代码 我可以在android和ios中做到这一点，但我不知道如何用flutter做到。

var parentWidget = Widget()

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

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

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

【问题讨论】：

如果物品多，最好用ListView

@PhucTran 是的，但是我不想要滚动效果，我只希望子小部件将父小部件拆分以适应不同的屏幕尺寸，所以不会有太多的孩子，可能六个，也许是八个

只有在项目数量足够大的情况下才能滚动（有些超出屏幕）

为什么不使用 GridView？ docs.flutter.io/flutter/widgets/GridView-class.html

***.com/a/54079114/10269042

【参考方案1】：

我想出了一种方法来处理这个要求，方法是计算每个子小部件的宽度和高度，然后将它们放在 wrap 中以安排它们自己

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