我正在尝试为我的应用程序创建一个表单，该表单在一行中包含两列。应该看起来像这样:
但是当我运行这段代码时:
@override
Widget build(BuildContext context) {
return /*new Padding (
padding: const EdgeInsets.all(15.0),
child: */new ListView (
//mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[new Row (children: <Widget>[
// Goal + Amount
new ListTile (
title: new Column (
mainAxisSize: MainAxisSize.min,
children: <Widget>[new Expanded(child: new TextField(
controller: widget._NameController,
style: new TextStyle (
fontSize: 20.0,
color: Colors.black,
),
decoration: new InputDecoration(
labelText: 'Name'
),
)), new Expanded(child:
new FlatButton(
onPressed: _showDatePicker,
child: new Text(
PARTIAL_DATE_FORMAT.format(_pickedDate)),
)),
]
)
),
// Goal Deadline
new ListTile (
title: new Column (
mainAxisSize: MainAxisSize.min,
children: <Widget>[new Expanded(child: new ListTile (
title: new TextField(
//controller: widget._TextController,,
style: new TextStyle (
fontSize: 20.0,
color: Colors.black
),
decoration: new InputDecoration(
labelText: 'Amount'
),
)
)), new Expanded(child:
new FlatButton(
onPressed: _showTimePicker,
child: new Text(_pickedTime.format(context)),
)),
]
)
),
]),
// Goal Description
new ListTile (
title: new TextField(
controller: widget._DescriptionController,
style: new TextStyle (
fontSize: 20.0,
color: Colors.black
),
decoration: new InputDecoration(
labelText: 'Description'
),
)
),
]
);
}
它解决了这个错误:
I/flutter ( 2837): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 2837): The following assertion was thrown during performLayout():
I/flutter ( 2837): RenderFlex children have non-zero flex but incoming width constraints are unbounded.
I/flutter ( 2837): When a row is in a parent that does not provide a finite width constraint, for example if it is in a
I/flutter ( 2837): horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a
I/flutter ( 2837): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter ( 2837): space in the horizontal direction.
I/flutter ( 2837): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter ( 2837): cannot simultaneously expand to fit its parent.
I/flutter ( 2837): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter ( 2837): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter ( 2837): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter ( 2837): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter ( 2837): constraints provided by the parent.
I/flutter ( 2837): The affected RenderFlex is:
I/flutter ( 2837): RenderFlex#770e0 relayoutBoundary=up8 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2837): The creator information is set to:
I/flutter ( 2837): Row ← Padding ← ConstrainedBox ← Container ← Listener ← _GestureSemantics ← RawGestureDetector ←
I/flutter ( 2837): GestureDetector ← InkWell ← ListTile ← Row ← RepaintBoundary-[<0>] ← ⋯
I/flutter ( 2837): The nearest ancestor providing an unbounded width constraint is:
I/flutter ( 2837): RenderFlex#47431 relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2837): creator: Row ← RepaintBoundary-[<0>] ← NotificationListener<KeepAliveNotification> ← KeepAlive ←
I/flutter ( 2837): AutomaticKeepAlive ← SliverList ← Viewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#60f18] ←
I/flutter ( 2837): Listener ← _GestureSemantics ←
I/flutter ( 2837): RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#f4728] ← ⋯
I/flutter ( 2837): parentData: <none> (can use size)
I/flutter ( 2837): constraints: BoxConstraints(w=381.4, 0.0<=h<=Infinity)
I/flutter ( 2837): size: MISSING
I/flutter ( 2837): direction: horizontal
I/flutter ( 2837): mainAxisAlignment: start
I/flutter ( 2837): mainAxisSize: max
I/flutter ( 2837): crossAxisAlignment: center
I/flutter ( 2837): textDirection: ltr
I/flutter ( 2837): verticalDirection: downSee also: https://flutter.io/layout/
I/flutter ( 2837): If this message did not help you determine the problem, consider using debugDumpRenderTree():
I/flutter ( 2837): https://flutter.io/debugging/#rendering-layer
I/flutter ( 2837): http://docs.flutter.io/flutter/rendering/debugDumpRenderTree.html
I/flutter ( 2837): If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
I/flutter ( 2837): https://github.com/flutter/flutter/issues/new
I/flutter ( 2837): When the exception was thrown, this was the stack:
I/flutter ( 2837): #0 RenderFlex.performLayout.<anonymous closure> (package:flutter/src/rendering/flex.dart:690:11)
I/flutter ( 2837): #1 RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:711:10)
I/flutter ( 2837): #2 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #3 RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:197:11)
I/flutter ( 2837): #4 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #5 RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:257:13)
I/flutter ( 2837): #6 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #7 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter ( 2837): #8 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #9 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter ( 2837): #10 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #11 RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:737:15)
I/flutter ( 2837): #12 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #13 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter ( 2837): #14 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #15 RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:164:27)
I/flutter ( 2837): #16 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #17 RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:286:13)
I/flutter ( 2837): #18 RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:979:12)
I/flutter ( 2837): #19 RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:903:20)
I/flutter ( 2837): #20 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #21 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter ( 2837): #22 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #23 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter ( 2837): #24 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #25 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter ( 2837): #26 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #27 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter ( 2837): #28 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #29 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter ( 2837): #30 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #31 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter ( 2837): #32 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #33 RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:197:11)
I/flutter ( 2837): #34 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #35 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:124:11)
I/flutter ( 2837): #36 _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:91:7)
I/flutter ( 2837): #37 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:194:7)
I/flutter ( 2837): #38 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:338:14)
I/flutter ( 2837): #39 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #40 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter ( 2837): #41 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #42 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter ( 2837): #43 _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1005:24)
I/flutter ( 2837): #44 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #45 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter ( 2837): #46 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #47 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter ( 2837): #48 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #49 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter ( 2837): #50 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #51 RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:2747:14)
I/flutter ( 2837): #52 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #53 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter ( 2837): #54 RenderObject.layout (package:flutter/src/rendering/object.dart:1962:7)
I/flutter ( 2837): #55 RenderStack.performLayout (package:flutter/src/rendering/stack.dart:466:15)
I/flutter ( 2837): #56 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1837:7)
I/flutter ( 2837): #57 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1126:18)
I/flutter ( 2837): #58 BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:262
:19)
I/flutter ( 2837): #59 BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/bin
ding.dart:581:22)
I/flutter ( 2837): #60 BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rende
ring/binding.dart:200:5)
I/flutter ( 2837): #61 BindingBase&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:713:15)
I/flutter ( 2837): #62 BindingBase&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:649:9)
I/flutter ( 2837): #63 _invoke (file:///b/build/slave/Linux_Engine/build/src/flutter/lib/ui/hooks.dart:91)
I/flutter ( 2837): #64 _drawFrame (file:///b/build/slave/Linux_Engine/build/src/flutter/lib/ui/hooks.dart:80)
I/flutter ( 2837): The following RenderObject was being processed when the exception was fired:
I/flutter ( 2837): RenderFlex#770e0 relayoutBoundary=up8 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2837): creator: Row ← Padding ← ConstrainedBox ← Container ← Listener ← _GestureSemantics ←
I/flutter ( 2837): RawGestureDetector ← GestureDetector ← InkWell ← ListTile ← Row ← RepaintBoundary-[<0>] ← ⋯
I/flutter ( 2837): parentData: offset=Offset(0.0, 0.0) (can use size)
I/flutter ( 2837): constraints: BoxConstraints(0.0<=w<=Infinity, h=56.0)
I/flutter ( 2837): size: MISSING
I/flutter ( 2837): direction: horizontal
I/flutter ( 2837): mainAxisAlignment: start
I/flutter ( 2837): mainAxisSize: max
I/flutter ( 2837): crossAxisAlignment: center
I/flutter ( 2837): textDirection: ltr
I/flutter ( 2837): verticalDirection: down
I/flutter ( 2837): This RenderObject had the following descendants (showing up to depth 5):
I/flutter ( 2837): RenderFlex#5610b NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2837): RenderSemanticsGestureHandler#6d25d NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2837): RenderPointerListener#4eb7b NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2837): RenderConstrainedBox#3d105 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2837): RenderStack#f6a43 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2837): RenderConstrainedBox#13bd4 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2837): RenderSemanticsGestureHandler#905d0 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2837): RenderPointerListener#ec2c3 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2837): RenderPadding#2b663 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2837): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 2837): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1433 pos 12: 'hasSize': is not true.
I/flutter ( 2837): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1433 pos 12: 'hasSize': is not true.
I/flutter ( 2837): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1433 pos 12: 'hasSize': is not true.
I/flutter ( 2837): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1433 pos 12: 'hasSize': is not true.
I/flutter ( 2837): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1433 pos 12: 'hasSize': is not true.
I/flutter ( 2837): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1433 pos 12: 'hasSize': is not true.
I/flutter ( 2837): Another exception was thrown: 'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 458 pos 12: 'child.hasSiz
e': is not true.
I/flutter ( 2837): Another exception was thrown: NoSuchMethodError: The method 'debugAssertIsValid' was called on null.
I/flutter ( 2837): Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.
我是 Flutter 的新手，由于互联网上缺乏相关信息，我在使用它时遇到了很多麻烦。
最佳答案
我创建了一个简单的示例来向您展示如何构建所需的布局，在您的代码中使用 ListTile 确实令人困惑，不应以这种方式使用。您提供的信息不足以说明布局中不同元素代表的含义。这就是我用 Container 填充它们的原因，您应该能够提供任何小部件作为容器的子项以开始使用。
import "package:flutter/material.dart";
class Layout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(),
body: new Padding(
padding: const EdgeInsets.all(30.0),
child:new Column(
children: <Widget>[
new Row(
children: <Widget>[
new SizedBox(
height: 30.0 ,
width: 200.0,
child: new Container(color: Colors.redAccent,),
),
new Container(width: 40.0,),
new SizedBox(
height: 30.0,
width: 50.0,
child: new Container(color:Colors.amberAccent),
)
],
),
new Container(height: 30.0,),
new Row(
children: <Widget>[
new SizedBox(
height: 40.0 ,
width: 100.0,
child: new Container(color: Colors.redAccent,),
),
new Container(width: 140.0,),
new SizedBox(
height: 40.0,
width: 50.0,
child: new Container(color:Colors.amberAccent),
)
],
),
new Container(height: 30.0,),
new Container(color: Colors.tealAccent,width: 290.0,height: 320.0,)
],
),),
);
}
}
更新
我相信您正在尝试进行与以下类似的布局，您的代码的真正问题是使用 ListTile，ListTile 用于存储最少的信息(例如联系人列表)，并且不应用于包含嵌套的小部件，因为它们的大小有限。
其次，我只是在做前面的例子作为演示，但是，是的，你对固定大小问题是正确的。为了避免这种情况，您可以使用检查 FractionallySizedBox ，或者就像我在 ListView 的最后所做的那样，使用 MediaQuery.of(context).size.height*0.3 给了我一个 Container 的高度是总屏幕高度的 30%。
import "package:flutter/material.dart";
class Layout extends StatefulWidget {
@override
_LayoutState createState() => new _LayoutState();
}
class _LayoutState extends State<Layout> {
String time = "Set Time";
String date = "Set Date ";
String dropDownString;
_showDate(BuildContext context) async {
var datePicked = await showDatePicker(context: context,
initialDate: new DateTime.now(),
firstDate: new DateTime(2010, 2),
lastDate: new DateTime(2018, 1));
setState(() {
date = "${datePicked.month}/${datePicked.day}/${datePicked.year}";
});
}
_showTime(BuildContext context) async {
var timePicked = await showTimePicker(
context: context, initialTime: new TimeOfDay.now());
setState(() {
time = "${timePicked.hour}:${timePicked.minute} ";
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text("Layout Example"),),
body: new Padding(padding: const EdgeInsets.all(20.0),
child: new ListView(
//shrinkWrap: true,
children: <Widget>[
new Row(
children: <Widget>[
new Expanded(child: new TextField()),
new Expanded(child: new FlatButton(
onPressed: () => _showDate(context),
child: new Text(date))),
],
),
new Row(
children: <Widget>[
new Expanded(child: new TextField()),
new Expanded(child: new FlatButton(
onPressed: () => _showTime(context),
child: new Text(time))),
],),
new TextField(
maxLines: 5,
),
new Container(
height: MediaQuery.of(context).size.height*0.3,
color: Colors.tealAccent,
)
],
),
),
);
}
}
关于dart - 混合列和行解决错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47681825/