将文本字段插入 Flutter 列时出错答案

【问题标题】：Error when insert Textfield into column Flutter将文本字段插入 Flutter 列时出错
【发布时间】：2020-05-16 06:35:17
【问题描述】：

这是我的代码

SafeArea(
  child: Scaffold(
    body: Container(
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Column(
                children: <Widget>[
                  Flexible(
                    child: Container(
                      width: 100,
                      child:
                          TextFormField(decoration: const InputDecoration()),
                    ),
                  )
                ],
              ),
              Column(
                children: <Widget>[
                  Flexible(
                    child: Container(
                      width: 100,
                      child:
                          TextFormField(decoration: const InputDecoration()),
                    ),
                  )
                ],
              ),
              Column(
                children: <Widget>[
                  Flexible(
                    child: Container(
                      width: 100,
                      child:
                          TextFormField(decoration: const InputDecoration()),
                    ),
                  )
                ],
              )
            ],
          )
        ],
      ),
    ),
  ),
);

但是当我运行该代码时，它会显示如下错误

═══════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderFlex#1b387 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'
The relevant error-causing widget was
    Row 
lib\GPA1.dart:24
════════════════════════════════════════════════════════════════════════════════

我无法构建我的项目。谁能帮帮我？？

我用的是颤振 1.17.0

我用我的移动设备预览这个

我使用的是三星 Galaxy A5 2016

我使用 Flexible 包装 TextFormField 但它再次显示相同的错误。

【问题讨论】：

为什么要在column小部件中插入一个文本字段，直接使用Container -> textfield小部件

标签： user-interface flutter dart

【解决方案1】：

您需要用 Expanded 小部件包装 Row 小部件。

SafeArea(
        child: Scaffold(
      body: Container(
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[],
            ),
            Expanded( // added 
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      Flexible(
                        child: Container(
                          width: 100,
                          child: TextFormField(
                              decoration: const InputDecoration()),
                        ),
                      )
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Flexible(
                        child: Container(
                          width: 100,
                          child: TextFormField(
                              decoration: const InputDecoration()),
                        ),
                      )
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Flexible(
                        child: Container(
                          width: 100,
                          child: TextFormField(
                              decoration: const InputDecoration()),
                        ),
                      )
                    ],
                  )
                ],
              ),
            )
          ],
        ),
      ),
    ));

【讨论】：

【解决方案2】：

我认为你应该摆脱“灵活”。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Column(
      children: <Widget>[
        Container(
          width: 100,
          child: TextFormField(decoration: const InputDecoration()),
        ),
      ],
    ),
    Column(
      children: <Widget>[
        Container(
          width: 100,
          child: TextFormField(decoration: const InputDecoration()),
        ),
      ],
    ),
    Column(
      children: <Widget>[
        Container(
          width: 100,
          child: TextFormField(decoration: const InputDecoration()),
        ),
      ],
    ),
  ],
),

【讨论】：

【解决方案3】：

此代码将完成这项工作。

 SafeArea(
    child: Scaffold(
  body: Container(
    margin: EdgeInsets.all(5),
    child: Column(
      mainAxisAlignment:
          MainAxisAlignment.start,
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
                child: Padding(
                    padding: EdgeInsets.only(
                        left: 5, right: 5),
                    child: TextFormField(
                        decoration:
                            const InputDecoration()))),
            Expanded(
                child: Padding(
                    padding: EdgeInsets.only(
                        left: 5, right: 5),
                    child: TextFormField(
                        decoration:
                            const InputDecoration()))),
            Expanded(
                child: Padding(
                    padding: EdgeInsets.only(
                        left: 5, right: 5),
                    child: TextFormField(
                        decoration:
                            const InputDecoration())))
          ],
        ),
      ],
    ),
  ),
));

Result

【讨论】：