Flutter：添加文本字段时出错答案

【问题标题】：Flutter : Errors when adding TextFieldsFlutter：添加文本字段时出错
【发布时间】：2019-08-05 17:47:16
【问题描述】：

请检查我下面的代码。

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Container(
        color: Colors.black,
        child: Column(
          children: <Widget>[_buildTitle(), _buildInputFields()],
        ),
      ),
    );
  }

  Widget _buildTitle() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          margin: EdgeInsets.only(top: 100),
          child: Column(
            children: <Widget>[
              Text(
                "something.xyz",
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 25,
                ),
                // textAlign: TextAlign.center,
              ),
            ],
          ),
        )
      ],
    );
  }

  Widget _buildInputFields() {
    return Row(
      children: <Widget>[
        Column(
          children: <Widget>[

            //Login Label
            Container(
              margin: EdgeInsets.only(
                top: 30,
                left: 20,
                right: 20,
              ),
              child: Text(
                "Login with Email",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),


            //Login Textfield          
              Container(
                  margin: EdgeInsets.only(
                    top: 5,
                    left: 20,
                    right: 20,
                  ),
                  child: TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none,
                  )),

              )],
        )
      ],
    );
  }
}

我正在尝试实现以下目标，但仍处于实现TextField 的阶段。

如您所见，我的TextFields 是白色的方形盒子。

当我运行代码时，出现以下错误。

I/flutter ( 4577): The following assertion was thrown during performLayout():
I/flutter ( 4577): BoxConstraints forces an infinite width.
I/flutter ( 4577): These invalid constraints were provided to RenderRepaintBoundary's layout() function by the
I/flutter ( 4577): following function, which probably computed the invalid constraints in question:
I/flutter ( 4577):   _RenderDecoration._layout.layoutLineBox (package:flutter/src/material/input_decorator.dart:819:11)
I/flutter ( 4577): The offending constraints were:
I/flutter ( 4577):   BoxConstraints(w=Infinity, 0.0<=h<=Infinity)
I/flutter ( 4577): When the exception was thrown, this was the stack:
I/flutter ( 4577): #0      BoxConstraints.debugAssertIsValid.<anonymous closure>.throwError 
I/flutter ( 4577): #1      BoxConstraints.debugAssertIsValid.<anonymous closure> 
I/flutter ( 4577): #2      BoxConstraints.debugAssertIsValid 
I/flutter ( 4577): #3      RenderObject.layout 
I/flutter ( 4577): #4      _RenderDecoration._layout.layoutLineBox 
I/flutter ( 4577): #5      _RenderDecoration._layout 
I/flutter ( 4577): #6      _RenderDecoration.performLayout 
I/flutter ( 4577): #7      RenderObject.layout 
I/flutter ( 4577): #8      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #9      RenderObject.layout 
I/flutter ( 4577): #10     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #11     RenderObject.layout 
I/flutter ( 4577): #12     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #13     RenderObject.layout 
I/flutter ( 4577): #14     RenderPadding.performLayout 
I/flutter ( 4577): #15     RenderObject.layout 
I/flutter ( 4577): #16     RenderFlex.performLayout 
I/flutter ( 4577): #17     RenderObject.layout 
I/flutter ( 4577): #18     RenderFlex.performLayout 
I/flutter ( 4577): #19     RenderObject.layout 
I/flutter ( 4577): #20     RenderFlex.performLayout 
I/flutter ( 4577): #21     RenderObject.layout 
I/flutter ( 4577): #22     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #23     RenderObject.layout 
I/flutter ( 4577): #24     MultiChildLayoutDelegate.layoutChild 
I/flutter ( 4577): #25     _ScaffoldLayout.performLayout 
I/flutter ( 4577): #26     MultiChildLayoutDelegate._callPerformLayout 
I/flutter ( 4577): #27     RenderCustomMultiChildLayoutBox.performLayout 
I/flutter ( 4577): #28     RenderObject.layout 
I/flutter ( 4577): #29     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #30     RenderObject.layout 
I/flutter ( 4577): #31     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #32     _RenderCustomClip.performLayout 
I/flutter ( 4577): #33     RenderObject.layout 
I/flutter ( 4577): #34     MultiChildLayoutDelegate.layoutChild 
I/flutter ( 4577): #35     _ScaffoldLayout.performLayout 
I/flutter ( 4577): #36     MultiChildLayoutDelegate._callPerformLayout 
I/flutter ( 4577): #37     RenderCustomMultiChildLayoutBox.performLayout 
I/flutter ( 4577): #38     RenderObject.layout 
I/flutter ( 4577): #39     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #40     RenderObject.layout 
I/flutter ( 4577): #41     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #42     _RenderCustomClip.performLayout 
I/flutter ( 4577): #43     RenderObject.layout 
I/flutter ( 4577): #44     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #45     RenderObject.layout 
I/flutter ( 4577): #46     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #47     RenderObject.layout 
I/flutter ( 4577): #48     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #49     RenderObject.layout 
I/flutter ( 4577): #50     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #51     RenderObject.layout 
I/flutter ( 4577): #52     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #53     RenderObject.layout 
I/flutter ( 4577): #54     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #55     RenderObject.layout 
I/flutter ( 4577): #56     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #57     RenderObject.layout 
I/flutter ( 4577): #58     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #59     RenderOffstage.performLayout 
I/flutter ( 4577): #60     RenderObject.layout 
I/flutter ( 4577): #61     RenderStack.performLayout 
I/flutter ( 4577): #62     RenderObject.layout 
I/flutter ( 4577): #63     __RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #64     RenderObject.layout 
I/flutter ( 4577): #65     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #66     RenderObject.layout 
I/flutter ( 4577): #67     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #68     RenderObject.layout 
I/flutter ( 4577): #69     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #70     RenderObject.layout 
I/flutter ( 4577): #71     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #72     RenderObject.layout 
I/flutter ( 4577): #73     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter ( 4577): #74     RenderObject.layout 
I/flutter ( 4577): #75     RenderView.performLayout 
I/flutter ( 4577): #76     RenderObject._layoutWithoutResize 
I/flutter ( 4577): #77     PipelineOwner.flushLayout 
I/flutter ( 4577): #78     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame 
I/flutter ( 4577): #79     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame 
I/flutter ( 4577): #80     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback 
I/flutter ( 4577): #81     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback 
I/flutter ( 4577): #82     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame 
I/flutter ( 4577): #83     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> 
I/flutter ( 4577): #92     _Timer._runTimers (dart:isolate/runtime/libtimer_impl.dart:382:19)
I/flutter ( 4577): #93     _Timer._handleMessage (dart:isolate/runtime/libtimer_impl.dart:416:5)
I/flutter ( 4577): #94     _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:171:12)
I/flutter ( 4577): (elided 8 frames from package dart:async)
I/flutter ( 4577): The following RenderObject was being processed when the exception was fired:
I/flutter ( 4577):   _RenderDecoration#1bed1 relayoutBoundary=up12 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 4577):   creator: _Decorator ← InputDecorator ← AnimatedBuilder ← Listener ← RawGestureDetector ←
I/flutter ( 4577):   GestureDetector ← TextSelectionGestureDetector ← IgnorePointer ← Semantics ← TextField ← Padding ←
I/flutter ( 4577):   Container ← ⋯
I/flutter ( 4577):   parentData: <none> (can use size)
I/flutter ( 4577):   constraints: BoxConstraints(unconstrained)
I/flutter ( 4577):   size: MISSING
I/flutter ( 4577): This RenderObject had the following descendants (showing up to depth 5):
I/flutter ( 4577):   RenderRepaintBoundary#00fdc NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 4577):     RenderRepaintBoundary#48615 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 4577):       RenderCustomPaint#30d09 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 4577):         RenderRepaintBoundary#83a25 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 4577):           RenderPointerListener#5441a NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 4577):   RenderConstrainedBox#9c2d7 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 4577):   RenderCustomPaint#193bb NEEDS-LAYOUT NEEDS-PAINT

我该如何解决这个问题？另外，我该如何修复TextField，使它们看起来像我图片中的那些？

【问题讨论】：

标签： android user-interface dart flutter flutter-layout

【解决方案1】：

想法是这样的：

您有一个 Row，它将您的宽度设置为无限。在其中，您有一个列，它将您的高度设置为无限。

然后你有一个容器，但你没有定义它的宽度或高度，所以它从它的父级继承它们（无限）。

Text 小部件并不关心（我认为），因为在内部，它会自行调整大小。但是 TextField 可以。

你需要限制它的宽度（或者它的父容器的宽度）。

编辑：简单的方法是为包含 TextField 的容器设置 width 属性。我在下面提供了一个示例。您还应该查看 Row 属性 mainAxisAlignment 以使您的字段在 Row 中居中：

return Row(
  mainAxisAlignment: MainAxisAlignment.center, // Center the child elements of the Row, along the Horizontal Axis
  children: <Widget>[
    Column(
      children: <Widget>[
        //Login Label
        Container(
          width: 200, // Set the width of the Container containing the Label so that it left aligns with your TextField below it
         ...
         //Login Textfield
         Container(
           width: 200, // Set the width of the TextField container to restrict it from being infinite

【讨论】：

谢谢。但是我该怎么做呢？