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

我在制作一个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;
  }
}

解决方法:

那是因为行容器不知道您的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'),
        ),
      ),

但是它在屏幕上看起来很奇怪,因此您可以使用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 将TextField平滑过渡到Text


下一篇:UIAlertController中TextField的用法