TextFormFields 之间的空间答案

【问题标题】：Space between TextFormFieldsTextFormFields 之间的空间
【发布时间】：2018-11-04 12:21:01
【问题描述】：

我正在开发一个 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 之间添加一个顶部空格。

【问题讨论】：

标签： user-interface dart uitextfield flutter

【解决方案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,
              ),
            ],
          ),

【讨论】：

【解决方案2】：

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

SizedBox(height: 8.0)

【讨论】：

【解决方案3】：

你也可以使用Wrap(runSpacing:8, children:[])

【讨论】：