添加文本字段时，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)

为了解决这个问题，在他的父容器中给你的 Textfield 一个宽度，像这样：

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

但它在你的屏幕上看起来很奇怪，所以你可以使用灵活作为你的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
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );

灵活的小部件