flutter - 如何使 SingleChildScrollView 中的 Wrap 小部件子项在 Flutter 中扩展到全高？

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跨越整个高度，以便图标可以始终保持在底部。

所以，我把它放在 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 一个容器的 child 屏幕的大小？

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