添加文本字段时，Flutter 屏幕显示为空

Question

我正在制作一个 flutter 应用程序，其中有一个文本并且它正在运行，但是之后当我添加一个文本字段时我运行该应用程序，我发现该应用程序是空的。

这是我的代码：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Scaffold c = Scaffold(
    body: Padding(
      padding: const EdgeInsets.only(top:30.0),
      child: new Row(
        children: <Widget>[
          new TextField(
            decoration: InputDecoration(
                border: InputBorder.none,
                hintText: 'Please enter a search term'
            ),
          ),
          new Text(
            'Text',
            style: TextStyle(
              fontSize: 20.0
            ),
          ),
        ],
      ),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return c;
  }
}

Answer 1

那是因为 Row 容器不知道您的 TextField 小部件的大小

这是您得到的错误：

    following function, which probably computed the invalid constraints in question:
        flutter:   _RenderDecoration._layout.layoutLineBox 
      (package:flutter/src/material/input_decorator.dart:808:11)
        flutter: The offending constraints were:
        flutter:   BoxConstraints(w=Infinity, 0.0<=h<=379.0)

为了解决该问题，请在其父容器中为您的文本字段指定一个宽度，如下所示：

Container(
        width: 200.0,
        child: new TextField(
          decoration: InputDecoration(
              border: InputBorder.none,
              hintText: 'Please enter a search term'),
        ),
      ),

但它在您的屏幕上看起来很奇怪，因此您可以改进使用 Flexible 作为 TextField 和 Text

的父级

        Scaffold c = Scaffold(
            body: Padding(
              padding: const EdgeInsets.only(top:30.0),
              child: new Row(
                children: <Widget>[
                  Flexible(
                    flex: 1,
                              child: new TextField(
                      decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: 'Please enter a search term'
                      ),
                    ),
                  ),
                  Flexible(
                    flex: 1,
                              child: new Text(
                      'Text',
                      style: TextStyle(
                        fontSize: 20.0
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );

Flexible Widget

添加文本字段时，Flutter 屏幕显示为空

Flutter screen appears empty when adding text field

android

textfield

dart

flutter