Flutter：如何拉伸 Wrap Widget 中的最后一个元素？答案

【问题标题】：Flutter: How do I stretch the last Element in a Wrap Widget?Flutter：如何拉伸 Wrap Widget 中的最后一个元素？
【发布时间】：2021-05-26 03:27:02
【问题描述】：

我认为这不需要太多解释，所以我没有包含任何代码或屏幕截图。
正如标题所示，我有一个 Wrap 小部件，我希望它的最后一个元素占据右侧所有可用的水平空间，（就像您将 Expanded 小部件放在 @987654329 中一样@)。

但在这种情况下，我不能使用Expanded 或Flexible，因为Wrap 不允许这样做。

编辑，添加了一些（简化的）代码和截图：

_buildTileDragTarget 只是一个返回DragTarget 的函数。

void _buildAnswerWidgetsFromStrings() {
    _answerWidgets.clear(); //start building from 0
    _answerWidgets.add(_buildTileDragTarget(index: 0)); //add initial DragTarget

    //for each word in _answerStrings, add Draggable Chip & DragTarget
    for (int i = 0; i < _answerStrings.length; i++) {
      WordTile wordTile = _answerStrings[i];
      _answerWidgets.add(
        Draggable<WordTile>(
          key: UniqueKey(),
          data: wordTile,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            child: Chip(
              label: Text(wordTile.word),
              padding: EdgeInsets.all(0),
            ),
            onTap: () {
              //seems to work: tap from top to bottom (5)
              setState(() {
                _options[wordTile.word] = true;
                _answerStrings.remove(wordTile);
              });
            },
          ),
          feedback: Material(child: Chip(label: Text(wordTile.word))),
          childWhenDragging: Chip(label: Text('  ' * wordTile.word.length)),
        ),
      );
      _answerWidgets.add(_buildTileDragTarget(index: i + 1)); //the position AFTER the current word (last)
    }

    //remove last DragTarget and add one wrapped in Expanded
    _answerWidgets.removeLast();
    _answerWidgets.add(
      SizedBox(
        // width: double.infinity,
        child: _buildTileDragTarget(index: _answerStrings.length),
      ),
    ); //TODO try wrapping the whole thing in 1 big DragTarget (for last index)
    // _answerWidgets.add(_buildTileDragTarget(index: _answerStrings.length));
  }

截图：我将Wrap 小部件包裹在紫色Container 中，每个DragTarget 都包裹在绿色Container 中。（蓝色部分可以忽略）

(1) 这就是我所拥有的（没有 SizedBox）

(2) 这是我尝试使用 SizedBox(width:double.infinity...)

时得到的结果 (3) 这就是我想要的

【问题讨论】：

标签： flutter flexbox expand stretch

【解决方案1】：

试试SizedBox(width: double.infinity)

【讨论】：

它会跳入一个全新的行（并填充它），而不是仅仅向右伸展，但感谢您的建议
@Cedric 对不起，它没有帮助，这是没有看到代码的盲目猜测。如果您使用一些代码更新您的问题，我可能会提供进一步的帮助。

【解决方案2】：

您还可以使用扩展构造函数

SizedBox.Expand(
child: //your widget
)

【讨论】：