如何使 SingleChildScrollView 中的 Wrap 小部件子级在 Flutter 中展开到完整高度？

Question

我正在尝试制作一个用户界面，其中容器内有一些文本字段，并且有一些图标按钮始终保留在底部。

\n\n

这是代码最小代码

\n\n

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

\n\n

这是我想要实现的用户界面（具体在右侧突出显示的框）\n

\n\n

有一个SingleChildScrollView父级，其子级为 Wrap。SingleChildScrollView正在获取可用的完整高度，但未Wrap跨越该完整高度。我想使Wrap跨度达到全高，以便图标始终保持在底部。

\n\n

所以，我把它放在里面，Expanded因为我认为这会让它扩展到完全可用的高度。但我收到了这个错误。

\n\n

The following assertion was thrown while applying parent data.:\nIncorrect use of ParentDataWidget.\n\nThe 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.\n\nUsually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.\nThe offending Expanded is currently placed inside a _SingleChildViewport widget.\n\nThe ownership chain for the RenderObject that received the incompatible parent data was:\n  Wrap \xe2\x86\x90 Expanded \xe2\x86\x90 _SingleChildViewport \xe2\x86\x90 IgnorePointer-[GlobalKey#01401] \xe2\x86\x90 Semantics \xe2\x86\x90 _PointerListener \xe2\x86\x90 Listener \xe2\x86\x90 _GestureSemantics \xe2\x86\x90 RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#7427b] \xe2\x86\x90 _PointerListener \xe2\x86\x90 \xe2\x8b\xaf\nWhen the exception was thrown, this was the stack\ndart:sdk_internal 4461:11                                                 throw_\npackages/flutter/src/widgets/widget_span.dart.lib.js 12339:23             <fn>\npackages/flutter/src/widgets/widget_span.dart.lib.js 12355:24             [_updateParentData]\npackages/flutter/src/widgets/widget_span.dart.lib.js 12372:61             attachRenderObject\npackages/flutter/src/widgets/widget_span.dart.lib.js 12184:12             mount\n...\n\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\n\n\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90 Exception caught by widgets library \xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\nIncorrect use of ParentDataWidget.\n\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\n

\n\n

因此，Expanded 并不是这个问题的答案。但我不知道还有什么。我是 Flutter 新手，很难理解 Flutter 布局系统。任何帮助都会很棒。谢谢你的时间。

\n

Answer 1

如果你让你的Wrap小部件成为屏幕大小的容器的子代，会怎么样？

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