Flutter 小部件不显示

Question

以下 Flutter 布局（一列内有两行，每行包含一个文本小部件和一个字段小部件）编译并运行 - 但文本和文本字段小部件未显示。您应该看到的是单词“用户名”后跟一行中的文本字段，以及单词“密码”后跟下一行中的文本字段。请问我做错了什么？

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return new MaterialApp(
     title: 'Welcome to Flutter',
     home: new Scaffold(
         appBar: new AppBar(
           title: new Text('Welcome to Flutter'),
         ),
         body: new Container(
           padding: new EdgeInsets.all(20.0),
           child: new Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               new Row(
                 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                 children: [
                   new Text('User Name'),
                   new TextField(
                     autofocus: true,
                     decoration: new InputDecoration(
                         border: InputBorder.none,
                         hintText: 'Please enter your user name'),
                   ),
                 ],
               ),
               new Row(
                 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                 children: [
                   new Text('User Name'),
                   new TextField(
                     decoration: new InputDecoration(
                         border: InputBorder.none,
                         hintText: 'Please enter your pasword'),
                   ),
                 ],
               ),
             ],
           ),
         )),
   );
 }
}

Answer 1

Per https://stackoverflow.com/a/45990477/1649135 如果您将没有固有宽度的小部件放入行内，则必须将它们嵌套在灵活的小部件内。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
          appBar: new AppBar(
            title: new Text('Welcome to Flutter'),
          ),
          body: new Container(
            padding: new EdgeInsets.all(20.0),
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    new Flexible(
                      child: new Text('User Name:'),
                    ),
                    new Flexible(
                      child: new Container(
                        margin: const EdgeInsets.all(15.0),
                        padding: const EdgeInsets.all(3.0),
                        decoration: new BoxDecoration(
                            border: new Border.all(color: Colors.blueAccent)),
                        child: new TextField(
                          style: Theme.of(context).textTheme.body1,
                        ),
                      ),
                    ),
                  ],
                ),
                new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    new Flexible(
                      child: new Text('Password:'),
                    ),
                    new Flexible(
                      child: new Container(
                        margin: const EdgeInsets.all(15.0),
                        padding: const EdgeInsets.all(3.0),
                        decoration: new BoxDecoration(
                            border: new Border.all(color: Colors.blueAccent)),
                        child: new TextField(
                          style: Theme.of(context).textTheme.body1,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          )),
    );
  }
}

Answer 2

使用新的Flexible() 儿童小部件

  Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
        Row(
        children: [
            new Flexible(
                child: new MyText(
                labelText: 'Select Country',
                color: MyColors.hint,),
            ),
            new Flexible(
                child: TextFormField()
            ),
        ],
   ),
],
)

Answer 3

还可以尝试使用不同的指定颜色的方式：

Color(0xff041421)

或

Colors.red

有时我们会错过这样的小细节。

Answer 4

对于 Flutter 3.16.2 ^{（也许更新）}

不知何故

Flexible

不起作用，但是，下面是：

Expanded(
  child: Semantics(
    enabled: true,
    child: searchField,
  ),
)

基本上，

Semantics

会在需要时检查并创建一个容器节点，但是，不是更昂贵的

Container

小部件类。

自动化加上更便宜;-)

但是，您可以通过将

container: true

传递到

Semantics

来跳过自动化部分。