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

这是我要实现的UI（特别是在右侧突出显示的框）

有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.
════════════════════════════════════════════════════════════════════════════════

因此，扩展不是解决方案。但是我不知道还有什么。我是Flutter的新手，很难理解Flutter的布局系统。任何帮助都会很棒。谢谢您的时间。

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

如何使SingleChildScrollView中的Wrap小部件子级在Flutter中扩展到最大高度？

1 个答案: