请检查我的下面的代码。
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 让它们看起来像我的图像中的那样？
最佳答案
想法是这样的:
你有一个行，它将你的宽度设置为无限。 在里面，你有一个柱子，它将你的高度设置为无限。
然后你有一个容器，但你还没有定义它的宽度或高度，所以它从它的父级继承它们(无限)。
文本小部件并不关心(我认为)，因为它在内部会自行调整大小。但 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
关于android - flutter : Errors when adding TextFields，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55169182/