我需要将ListView放在2个按钮之上(在列中),但是我在这样做时遇到了很大的困难,参见下面。
我想要实现的例子是一个包含文本的列表视图的Terms 页面,其中有2个按钮固定在屏幕底部,允许用户滚动并随时单击Accept
/Decline
。
问题:
#1 & #3是带有梯度背景集的脚手架模板的一部分。我用Widget填充内容,它应该包含在这个特定UI中的ListView
&Button
。
#2是造成问题的原因。当尝试呈现以下UI时,下面的堆栈跟踪显示
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
会导致以下呈现错误:
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
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
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),
);
}
}
}
发布于 2021-03-03 00:37:21
在你的UIBaseContentCenter.dart里
变化
final Widget mainComponent = Container(
child: Column(
children: [
UiComponentLogoTop(),
widget, // Here is the issue
uiComponentTrademarkBottom
],
),
);
至
final Widget mainComponent = Container(
child: Column(
children: [
UiComponentLogoTop(),
Expanded(child: widget),
uiComponentTrademarkBottom
],
),
);
https://stackoverflow.com/questions/66448736
复制相似问题