RenderFlex子级具有文本字段颤动的非零flex错误

Question

我正在尝试创建此设计：https://www.uplabs.com/posts/public-transport-app-design?utm_source=extension&utm_medium=单击&utm_campaign=muzli(第一个的顶部(

但我遇到了这个问题：renderflex的孩子有非零的flex，但传入的高度限制是无限的

这是我的代码：

Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
child: Stack(
children: [
Positioned(
left: 0,
right: 0,
child: Container(
width: double.maxFinite,
height: MediaQuery.of(context).size.height / 1.5,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/abstract2.jpg"),
fit: BoxFit.cover)),
)),
Positioned(
left: 0,
top: 5,
child: SizedBox(
height: 20.0,
child: Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Expanded(child: TextField()),
Icon(Icons.person)
],
),
),
)),

问题是，当我删除并用Text((替换TextField((时，错误就会消失。我不知道我做错了什么。你能帮我吗？感谢

Answer 1

试试这个。

Stack(
children: [
/// this is usefull cause it says that the stack will cover all of the screen
SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
///place your image here
Container(
height: MediaQuery.of(context).size.height*0.5,
decoration: const BoxDecoration(color: Colors.red),
// decoration: const BoxDecoration(
//     image: DecorationImage(
//         image: AssetImage("assets/images/abstract2.jpg"),
//         fit: BoxFit.cover)),
),
///text field ned a width or to be flexible to work.
Positioned(
width: MediaQuery.of(context).size.width,
top: MediaQuery.of(context).size.height *0.3,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: TextFormField(
maxLines: 1,
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
fillColor: StyleConstants.whiteColor,
filled: true,
border: StyleConstants.defaultBorder,
focusedBorder: StyleConstants.focusedBorder,
enabledBorder: StyleConstants.defaultBorder,
contentPadding: const EdgeInsets.symmetric(
vertical: 20.0, horizontal: 20.0),
),
),
), Icon(Icons.person)],
),
)
],
)

Answer 2

试试这个伙伴，我认为问题是由在sizedbox中使用expanded引起的。当我在行中使用TextField时，通常会出现此错误。在这种情况下，您需要将TextField包装在SizedBox或Container中，并定义其宽度和高度，或者将其包装在Flexible Widget中。然后它就解决了。

child: SizedBox(
height: 20.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Expanded(child: TextField()),
Icon(Icons.person)
],
),