TextFormFields 之间的空间

Question

我正在开发 Flutter 应用程序。
我有这个飞镖代码：

List<Widget> buildInputs() {
    return[
      new Container(
        padding: new EdgeInsets.only(
          top: 20.0,
          right: 40.0,
          left: 40.0,
        ),
        child: new Column(
          children: <Widget>[
            new TextFormField(
              decoration: new InputDecoration(labelText: 'E-Mail', contentPadding: new EdgeInsets.only(bottom: 1.0)),
              validator: (value) => value.isEmpty ? 'Email can\'nt be empty' : null,
              onSaved: (value) => _email = value,
              ),
            new TextFormField(
              decoration: new InputDecoration(labelText: 'Password', contentPadding: new EdgeInsets.only(bottom: 1.0)),
              obscureText: true,
              validator: (value) => value.isEmpty ? 'Password can\'nt be empty' : null,
              onSaved: (value) => _password = value,
            ),
          ],
        ),
      ),
    ];
  }  

正如你所看到的，我使用了这个：contentPadding: new EdgeInsets.only(bottom: 1.0)
我使用它的标题TextFormField是更接近 TextFormFieldLine。
现在，如何在两个TextFormFields之间添加一个顶部空间。

Answer 1

有几种方法可以完成它：

第一个填充小部件：用填充小部件包裹表单字段

Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(top: 25.0),
                child: new TextFormField(
                  decoration: new InputDecoration(
                      labelText: 'E-Mail',
                      contentPadding: new EdgeInsets.only(bottom: 1.0)),
                  validator: (value) =>
                      value.isEmpty ? 'Email can\'nt be empty' : null,
                  // onSaved: (value) => _email = value,
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 25.0),
                child: new TextFormField(
                  decoration: new InputDecoration(
                      labelText: 'Password',
                      contentPadding: new EdgeInsets.only(bottom: 1.0)),
                  obscureText: true,
                  validator: (value) =>
                      value.isEmpty ? 'Password can\'nt be empty' : null,
                  // onSaved: (value) => _password = value,
                ),
              ),
            ],
          ),

第二个 SizedBox 小部件：我更喜欢这种在表单字段之间添加空间的方法，因为它的代码简洁且代码更少。

Column(
            children: <Widget>[
              new TextFormField(
                decoration: new InputDecoration(
                    labelText: 'E-Mail',
                    contentPadding: new EdgeInsets.only(bottom: 1.0)),
                validator: (value) =>
                    value.isEmpty ? 'Email can\'nt be empty' : null,
                // onSaved: (value) => _email = value,
              ),
              SizedBox(height: 25.0,),
              new TextFormField(
                decoration: new InputDecoration(
                    labelText: 'Password',
                    contentPadding: new EdgeInsets.only(bottom: 1.0)),
                obscureText: true,
                validator: (value) =>
                    value.isEmpty ? 'Password can\'nt be empty' : null,
                // onSaved: (value) => _password = value,
              ),
            ],
          ),

Answer 2

您可以SizedBox在文本字段之间添加一个（一个非常基本的没有装饰的小部件）：

SizedBox(height: 8.0)