首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >添加按钮或ListView下面的任何内容,导致hasSize呈现问题

添加按钮或ListView下面的任何内容,导致hasSize呈现问题
EN

Stack Overflow用户
提问于 2021-03-02 23:46:15
回答 1查看 145关注 0票数 0

我需要将ListView放在2个按钮之上(在中),但是我在这样做时遇到了很大的困难,参见下面。

我想要实现的例子是一个包含文本的列表视图的Terms 页面,其中有2个按钮固定在屏幕底部,允许用户滚动并随时单击Accept/Decline

问题:

#1 & #3是带有梯度背景集的脚手架模板的一部分。我用Widget填充内容,它应该包含在这个特定UI中的ListView &Button

#2是造成问题的原因。当尝试呈现以下UI时,下面的堆栈跟踪显示

代码语言:javascript
运行
复制
import 'package:testapp/activities/ui_privacy.dart';
import 'package:testapp/ui/components/ui_button.dart';
import 'package:testapp/ui/components/ui_button_exit.dart';
import 'package:testapp/ui/design/ui_component_base_content_centre.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class UiTermsConditions extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Widget terms = ListView(
      children: [
        Container(
          width: double.infinity,
          padding: const EdgeInsets.only(top: 8, bottom: 8),
          child: Text("Terms and Conditions",
              style: TextStyle(fontWeight: FontWeight.bold),
              textAlign: TextAlign.left),
        ),
        Container(
          width: double.infinity,
          child: Text(
            'These Terms and Conditions constitute a legally binding agreement made between you, whether personally or on behalf of an entity (“you”) and [business entity name] (“we,” “us” or “our”), concerning your access to and use of the [website name.com] website as well as any other media form, media channel, mobile website or mobile application related, linked, or otherwise connected thereto (collectively, the “Site”).'
            '\n\n'
            'You agree that by accessing the Site, you have read, understood, and agree to be bound by all of these Terms and Conditions. If you do not agree with all of these Terms and Conditions, then you are expressly prohibited from using the Site and you must discontinue use immediately.'
            '\n\n'
            'Supplemental terms and conditions or documents that may be posted on the Site from time to time are hereby expressly incorporated herein by reference. We reserve the right, in our sole discretion, to make changes or modifications to these Terms and Conditions at any time and for any reason.'
            '\n\n'
            'We will alert you about any changes by updating the “Last updated” date of these Terms and Conditions, and you waive any right to receive specific notice of each such change.'
            '\n\n'
            'It is your responsibility to periodically review these Terms and Conditions to stay informed of updates. You will be subject to, and will be deemed to have been made aware of and to have accepted, the changes in any revised Terms and Conditions by your continued use of the Site after the date such revised Terms and Conditions are posted.'
            '\n\n'
            'The information provided on the Site is not intended for distribution to or use by any person or entity in any jurisdiction or country where such distribution or use would be contrary to law or regulation or which would subject us to any registration requirement within such jurisdiction or country.'
            '\n\n'
            'Accordingly, those persons who choose to access the Site from other locations do so on their own initiative and are solely responsible for compliance with local laws, if and to the extent local laws are applicable.',
            softWrap: true,
          ),
        )
      ],
    );

    final Widget buttonRow = Container(
      padding: const EdgeInsets.only(top: 16),
      child: Column(
        children: [
          UiButton(
            text: "Accept",
            callback: () {
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (context) => UiPrivacy()));
            },
          ),
          UiButtonExit(
            text: "Decline",
            flat: true,
            padding: const EdgeInsets.only(top: 16),
          ),
        ],
      ),
    );


    ==================================== IMPORTANT BITS BELOW ======================

    final content = Column(
      children: [
        Expanded(
            // terms is a ListView
            child: terms
        ),
        buttonRow
      ],
    );
    return UiBaseContentCenter(widget: content);
  }
}

Posted解决方案:

有一些已经张贴的解决方案,但经过尝试每一个-我没有取得任何成功。

  • 帖子提出了不能将ListView放置在Column内的Expanded中的原因,但在呈现时会引发以下呈现错误。 呈现库=====================================================捕获的========异常--在performLayout()期间抛出了以下断言: RenderFlex子级具有非零flex,但传入的高度约束是无限的。当列位于不提供有限高度约束的父列中时(例如,如果列处于垂直可滚动状态),它将尝试沿着垂直轴对其子列进行收缩包装。在子程序上设置一个挠曲(例如,使用扩展)表示该子节点将在垂直方向上展开以填充剩余的空间。这两个指令是相互排斥的。如果父对象要收缩,则子对象不能同时展开以适应其父进程。考虑将mainAxisSize设置为MainAxisSize.min,使用FlexFit.loose适合灵活的子级(使用灵活的而不是扩展的)。这将允许灵活的子级将自己的大小缩小到他们被迫占用的无限剩余空间,然后将导致RenderFlex收缩,而不是扩展以满足父级提供的最大约束。(为简洁起见移除)

TLD; Column博士试图缩小和最小化所使用的空间,而Expanded试图填补剩余的空间,这两个操作是矛盾的。

设置MainAxisSize.min &将Expanded更改为Flexible会导致以下呈现错误:

代码语言:javascript
运行
复制
  Performing hot reload...
  Syncing files to device sdk gphone x86...

   ======== Exception caught by rendering library =====================================================
    The following assertion was thrown during performResize():
    Vertical viewport was given unbounded height.
    
    Viewports expand in the scrolling direction to fill their container. In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand. This situation typically happens when a scrollable widget is nested inside another scrollable widget.
    
    If this widget is always nested in a scrollable widget there is no need to use a viewport because there will always be enough vertical space for the children. In this case, consider using a Column instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size the height of the viewport to the sum of the heights of its children.
    
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    When the exception was thrown, this was the stack: 
    #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:1356:15)
    #1      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:1417:6)
    #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1756:9)
    #3      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
    #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
    ...
    The following RenderObject was being processed when the exception was fired: RenderViewport#a87b9 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...  needs compositing
    ...  parentData: <none> (can use size)
    ...  constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
    ...  size: MISSING
    ...  axisDirection: down
    ...  crossAxisDirection: right
    ...  offset: ScrollPositionWithSingleContext#ad184(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#a328b, ScrollDirection.idle)
    ...  anchor: 0.0
    RenderObject: RenderViewport#a87b9 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
      needs compositing
      parentData: <none> (can use size)
      constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
      size: MISSING
      axisDirection: down
      crossAxisDirection: right
      offset: ScrollPositionWithSingleContext#ad184(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#a328b, ScrollDirection.idle)
      anchor: 0.0
    ...  center child: RenderSliverPadding#256bb NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...    parentData: paintOffset=Offset(0.0, 0.0)
    ...    constraints: MISSING
    ...    geometry: null
    ...    padding: EdgeInsets(0.0, 24.0, 0.0, 0.0)
    ...    textDirection: ltr
    ...    child: RenderSliverList#c59be NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...      parentData: paintOffset=Offset(0.0, 0.0)
    ...      constraints: MISSING
    ...      geometry: null
    ...      no children current live
    ====================================================================================================
    
    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderViewport#a87b9 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================
    
    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderViewport#a87b9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================
    
    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderIgnorePointer#14129 relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================
    
    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderSemanticsAnnotations#1b4f6 relayoutBoundary=up13 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================
    Reloaded 0 of 916 libraries in 223ms.
    
    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderPointerListener#48079 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================
    
    ======== Exception caught by rendering library =====================================================
    The following assertion was thrown during performLayout():
    RenderBox was not laid out: RenderSemanticsGestureHandler#beaa9 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    
    
    Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
    In either case, please report this assertion by filing a bug on GitHub:
      https://github.com/flutter/flutter/issues/new?template=BUG.md
    
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    When the exception was thrown, this was the stack: 
    #2      RenderBox.size (package:flutter/src/rendering/box.dart:1785:12)
    #3      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:114:21)
    #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
    #5      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
    #6      RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
    ...
    The following RenderObject was being processed when the exception was fired: RenderPointerListener#60907 relayoutBoundary=up10 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...  needs compositing
    ...  parentData: <none> (can use size)
    ...  constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
    ...  size: MISSING
    ...  behavior: deferToChild
    ...  listeners: signal
    RenderObject: RenderPointerListener#60907 relayoutBoundary=up10 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
      needs compositing
      parentData: <none> (can use size)
      constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
      size: MISSING
      behavior: deferToChild
      listeners: signal
    ...  child: RenderSemanticsGestureHandler#beaa9 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...    needs compositing
    ...    parentData: <none> (can use size)
    ...    constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
    ...    size: MISSING
    ...    gestures: <none>
    ...    child: RenderPointerListener#48079 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...      needs compositing
    ...      parentData: <none> (can use size)
    ...      constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
    ...      size: MISSING
    ...      behavior: opaque
    ...      listeners: down
    ...      child: RenderSemanticsAnnotations#1b4f6 relayoutBoundary=up13 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...        needs compositing
    ...        parentData: <none> (can use size)
    ...        constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
    ...        size: MISSING
    ...        child: RenderIgnorePointer#14129 relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    ...          needs compositing
    ...          parentData: <none> (can use size)
    ...          constraints: BoxConstraints(0.0<=w<=376.7, 0.0<=h<=Infinity)
    ...          size: MISSING
    ...          ignoring: false
    ...          ignoringSemantics: false
    ====================================================================================================
    
    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderPointerListener#60907 relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================
    
    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: _RenderScrollSemantics#24769 relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================
    
    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderRepaintBoundary#a21f7 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================
    
    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderCustomPaint#5f4f4 relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      ListView file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:11:26
    ====================================================================================================
    
    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderRepaintBoundary#f535d relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      Column file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:62:21
    ====================================================================================================
    
    ======== Exception caught by rendering library =====================================================
    RenderBox was not laid out: RenderRepaintBoundary#f535d relayoutBoundary=up6 NEEDS-PAINT
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 1785 pos 12: 'hasSize'
    The relevant error-causing widget was: 
      Column file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/activities/ui_terms_conditions.dart:62:21
    ====================================================================================================
    
    ======== Exception caught by rendering library =====================================================
    A RenderFlex overflowed by 167 pixels on the bottom.
    The relevant error-causing widget was: 
      Column file:///C:/Users/CybeX/testapp/testapp-mobile-flutter/lib/ui/design/ui_component_base_content_centre.dart:16:14
    ====================================================================================================
  • 这篇文章建议使用条子复制和粘贴示例,但这不是滚动(它可能只是我的模拟器)
  • 我尝试了一些其他的建议,但已经失去了方向。

任何建议,以实现这样一个简单的UI设计,将不胜感激!

更多代码:

UIBaseContentCenter.dart

代码语言:javascript
运行
复制
import 'package:testapp/ui/design/ui_component_base.dart';
import 'package:testapp/ui/layout/ui_component_logo_top.dart';
import 'package:testapp/ui/layout/ui_component_trademark_bottom.dart';
import 'package:flutter/widgets.dart';

class UiBaseContentCenter extends StatelessWidget {
  final Widget widget;
  final Widget bottomNavBar;

  const UiBaseContentCenter({Key key, this.widget, this.bottomNavBar}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var uiComponentTrademarkBottom = UiComponentTrademarkBottom();
    final Widget mainComponent = Container(
      child: Column(
        children: [
          UiComponentLogoTop(),
          widget,
          uiComponentTrademarkBottom
        ],
      ),
    );

    return UiBase(widget: mainComponent, bottomNavigationBar: bottomNavBar);
  }
}

根UI支架

UiBase.dart

代码语言:javascript
运行
复制
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';

import '../app_theme.dart';

class UiBase extends StatelessWidget {
  final Widget widget;
  final AppBar appBar;
  final BottomNavigationBar bottomNavigationBar;

  const UiBase({Key key, this.widget, this.appBar, this.bottomNavigationBar})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (appBar != null && bottomNavigationBar != null) {
      return Scaffold(
        appBar: appBar,
        body: Container(
            padding: standardSideInsets,
            width: double.infinity,
            decoration: AppTheme().backgroundDecorationGradient,
            child: widget),
        bottomNavigationBar: bottomNavigationBar,
      );
    } else if (appBar != null && bottomNavigationBar == null) {
      return Scaffold(
        appBar: appBar,
        body: Container(
            padding: standardSideInsets,
            width: double.infinity,
            decoration: AppTheme().backgroundDecorationGradient,
            child: widget),
      );
    } else if (appBar == null && bottomNavigationBar != null) {
      return Scaffold(
        body: Container(
            padding: standardSideInsets,
            width: double.infinity,
            decoration: AppTheme().backgroundDecorationGradient,
            child: widget),
        bottomNavigationBar: bottomNavigationBar,
      );
    } else {
      return Scaffold(
        body: Container(
            padding: standardSideInsets,
            width: double.infinity,
            decoration: AppTheme().backgroundDecorationGradient,
            child: widget),
      );
    }
  }
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-03 00:37:21

在你的UIBaseContentCenter.dart

变化

代码语言:javascript
运行
复制
   final Widget mainComponent = Container(
      child: Column(
        children: [
          UiComponentLogoTop(),
          widget, // Here is the issue
          uiComponentTrademarkBottom
        ],
      ),
    );

代码语言:javascript
运行
复制
   final Widget mainComponent = Container(
      child: Column(
        children: [
          UiComponentLogoTop(),
          Expanded(child: widget),
          uiComponentTrademarkBottom
        ],
      ),
    );
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66448736

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档