连续包裹小部件会从屏幕上删除小部件

Question

我正在尝试创建一个容器，其中一半是文本字段，另一半是文本。

像这样：

文本字段_________文本

这是我的，但屏幕上没有显示任何内容。尝试使用 Widget 检查，但由于某种原因它无法在 VSCode 上工作（检查器窗格中没有显示任何内容）。

这里有什么问题？

Container(
                padding: const EdgeInsets.symmetric(horizontal: 8),
                height: 44,
                margin: const EdgeInsets.all(4),
                decoration: BoxDecoration(
                    color: const Color(0xFF3A4455),
                    borderRadius: BorderRadius.circular(8)),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: const [
                    TextField(
                      decoration: InputDecoration(
                        hintStyle: TextStyle(color: Color(0xFFf0f4ef)),
                        border: InputBorder.none,
                        hintText: 'Display Name',
                      ),
                    ),
                    Text(
                      "USERNAME",
                      style: TextStyle(
                        color: Color(0xFFf0f4ef),
                      ),
                    )
                  ],
                ),
              ),

Answer 1

发生这种情况是因为 TextField ，只需将 TextField 换成 Expanded.

           Container(
              padding: const EdgeInsets.symmetric(horizontal: 8),
              height: 44,
              margin: const EdgeInsets.all(4),
              decoration: BoxDecoration(
                color: const Color(0xFF3A4455),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: const [
                  Expanded(
                    child: TextField(
                      decoration: InputDecoration(
                        hintStyle: TextStyle(color: Color(0xFFf0f4ef)),
                        border: InputBorder.none,
                        hintText: 'Display Name',
                      ),
                    ),
                  ),
                  Text(
                    "USERNAME",
                    style: TextStyle(
                      color: Color(0xFFf0f4ef),
                    ),
                  ),
                ],
              ),
            ),

Answer 2

这个错误是由InputDecorator引起的，不能有未绑定的宽度。因此它的父部件需要设置提供给装饰器的“space”。在这种情况下，文本小部件。只需将您的 TextField 小部件包装在 SizedBox 中并为其设置一些宽度。（或在上面提供的扩展中）

示例：

Container(
          padding: const EdgeInsets.symmetric(horizontal: 8),
          height: 44,
          width: 300,
          margin: const EdgeInsets.all(4),
          decoration: BoxDecoration(
              color: const Color(0xFF3A4455),
              borderRadius: BorderRadius.circular(8)),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [
              SizedBox(
                width: 100,
                child: TextField(
                  decoration: InputDecoration(
                    hintStyle: TextStyle(color: Color(0xFFf0f4ef)),
                    border: InputBorder.none,
                    hintText: 'Display Name',
                  ),
                ),
              ),
              Text(
                "USERNAME",
                style: TextStyle(
                  color: Color(0xFFf0f4ef),
                ),
              )
            ],
          ),
        ),

Answer 3

尝试将您的文本字段包裹在 Expanded or Flexible 小部件中，如果您想要在文本字段和文本之间添加额外的 space，则在其中添加 SizedBox 或 Container，并且设置 width.You 可以设置 flex 属性也在 Expanded 或 Flexible.

内

Container(
      padding: EdgeInsets.symmetric(horizontal: 8),
      height: 44,
      margin: EdgeInsets.all(4),
      decoration: BoxDecoration(
        color: Color(0xFF3A4455), 
        borderRadius: BorderRadius.circular(8)),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: TextField(
              decoration: InputDecoration(
                hintStyle: TextStyle(color: Color(0xFFf0f4ef)),
                border: InputBorder.none,
                hintText: 'Display Name',
              ),
            ),
          ),
          //SizedBox(width: 20,),// if you want space then remove comment
          Text(
            "USERNAME",
            style: TextStyle(
              color: Color(0xFFf0f4ef),
            ),
          )
        ],
      ),
    ),

结果->

连续包裹小部件会从屏幕上删除小部件

Wrapping widget in a row removes widget from screen

dart

flutter