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。
现在，如何在两个TextFormField之间添加顶部空间。

Answer 1

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

SizedBox(height: 8.0)

Answer 2

有几种方法可以完成它：

第一个填充小部件：使用填充小部件包装表格字段

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小部件：：我更喜欢这种方法在Form Fields之间添加空格作为其简洁的代码。

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 3

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

TextFormFields之间的空间

3 个答案: