如何在Flutter中使SingleChildScrollView内的Wrap widget子控件扩展到全高？

Question

我想做一个UI，在一个容器内有一些文本字段，还有一些图标按钮，这些按钮总是停留在底部。

下面是最小的代码

Center(
  child: Container(
    // width: 1006,
    constraints: BoxConstraints(
      maxWidth: 1006,
      maxHeight: sizingInformation.screenSize.height,
    ),
    margin: EdgeInsets.only(
      left: isMobile ? 0 : 34,
    ),
    child: Flex(
      direction: Axis.vertical,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      Flex(
      // rest of the widgets
      ),
      Expanded(
        child: Container(
          padding: EdgeInsets.all(isMobile ? 15 : 34),
          margin: EdgeInsets.only(
            top: isMobile ? 15 : 27,
          ),
          constraints: BoxConstraints(
            maxWidth: 1006,
          ),
          height: 750,
          decoration: BoxDecoration(
            color: CARD_DARK_PURPLE,
            borderRadius: BorderRadius.circular(8),
          ),
          child: SingleChildScrollView(
            physics: AlwaysScrollableScrollPhysics(),
            child: Wrap(
              direction: Axis.horizontal,
              children: <Widget>[
                Wrap(
                  direction: Axis.horizontal,
                  children: <Widget>[
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          "Pošiljalac",
                          style: TextStyle(
                            color: WHITE,
                            fontSize: isMobileTablet ? 22 : 24,
                            fontWeight: BOLD,
                          ),
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        _phoneInfo(widget.order.senderPhoneNumber, isMobile),
                        _emailInfo(widget.order.senderEmail, isMobile),
                        _fullNameInfo(widget.order.senderFirstName,
                            widget.order.senderLastName, isMobile, isMobileTablet),
                        _addressInfo(widget.order.senderStreetNumber, isMobile),
                        _zipCodeInfo(widget.order.senderZipCode, isMobile),
                        _cityInfo(widget.order.senderCity, isMobile),
                        SizedBox(
                          height: isDesktopLaptop ? 14 : 0,
                        ),
                        _payeeInfo(isMobile,  isMobileTablet),
                      ],
                    ),
                    SizedBox(
                      width: 34,
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        SizedBox(
                          height: isDesktopLaptop ? 482 : 10,
                        ),
                        _weightInfo(isMobile,  isMobileTablet),
                        _noteSmall(isMobile,  isMobileTablet),
                      ],
                    ),
                  ],
                ),
                Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      SizedBox(height: 10),
                      Flex(
                        direction: Axis.horizontal,
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          SizedBox(width: 20),
                          Material(
                            color: DIVIDER,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(30),
                            ),
                            child: Center(
                              child: Ink(
                                decoration: const ShapeDecoration(
                                  color: DIVIDER,
                                  shape: CircleBorder(),
                                ),
                                child: IconButton(
                                  splashColor: DARK_PURPLE.withOpacity(0.3),
                                  icon: Image.asset(
                                    'assets/images/inter-note-icon.png',
                                    width: 20,
                                    height: 24,
                                  ),
                                  onPressed: () {
                                    if (widget.order.operatorNote == "/") {
                                      _dialogs.internNoteDialog(
                                          context,
                                          widget.order.id,
                                          "order",
                                          widget.order.operatorNote);
                                    } else {
                                      _dialogs.changeInternNoteDialog(
                                          context,
                                          widget.order.id,
                                          "order",
                                          widget.order.operatorNote);
                                    }
                                  },
                                ),
                              ),
                            ),
                          ),
                          SizedBox(width: 20),
                          Material(
                            color: DIVIDER,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(30),
                            ),
                            child: Center(
                              child: Ink(
                                decoration: const ShapeDecoration(
                                  color: DIVIDER,
                                  shape: CircleBorder(),
                                ),
                                child: IconButton(
                                  splashColor: DARK_PURPLE.withOpacity(0.3),
                                  icon: Image.asset(
                                    'assets/images/trash-icon.png',
                                    width: 28,
                                    height: 28,
                                  ),
                                  onPressed: () {
                                    _dialogs.deleteOrderDialog(
                                        context, widget.order.id, isMobile);
                                  },
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),  
    ),
  ),
)

这是我想实现的用户界面（特别是右侧高亮的方框）。

有 SingleChildScrollView 的父类，其子类为Wrap。SingleChildScrollView 占用了全部可用高度，但 Wrap 没有跨越到那个完整的高度。我想让 Wrap span全高，这样图标就可以一直保持在底部。

所以，我把它放在了 Expanded 因为我认为这将使它扩展到全部可用高度。但我得到了这个错误。

The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.

The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.

Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a _SingleChildViewport widget.

The ownership chain for the RenderObject that received the incompatible parent data was:
  Wrap ← Expanded ← _SingleChildViewport ← IgnorePointer-[GlobalKey#01401] ← Semantics ← _PointerListener ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#7427b] ← _PointerListener ← ⋯
When the exception was thrown, this was the stack
dart:sdk_internal 4461:11                                                 throw_
packages/flutter/src/widgets/widget_span.dart.lib.js 12339:23             <fn>
packages/flutter/src/widgets/widget_span.dart.lib.js 12355:24             [_updateParentData]
packages/flutter/src/widgets/widget_span.dart.lib.js 12372:61             attachRenderObject
packages/flutter/src/widgets/widget_span.dart.lib.js 12184:12             mount
...
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
Incorrect use of ParentDataWidget.
════════════════════════════════════════════════════════════════════════════════

所以，Expanded不是这个问题的答案。但我不知道还有什么是。我是Flutter新手，很难理解Flutter布局系统。任何帮助将是巨大的。谢谢你的时间。

Answer 1

如果你把你的 Wrap widget的子容器的屏幕大小？

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
          child: Container(
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              child: Wrap(
                children: [],
              ))),
    );
  }
}