Question

我正在尝试为我的应用创建一个包含一行内两列的表单。应该看起来像这样：

但是当我运行这段代码时：

@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.

由于互联网上缺乏关于此事的信息，我很慌张，并且在使用它时遇到了很多麻烦。

Answer 1

我创建了一个简单的示例，向您展示如何构建所需的布局，代码中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,
            )

          ],
        ),
      ),
    );
  }
}

混合列和行解决错误

1 个答案: