Question

我要创建一行并排提交多个文本的行。在行小部件内添加文本字段会导致错误，因此我在问题上进行了搜索，找到了一种解决方案，该解决方案使用“灵活”小部件将文本字段放入行内，效果很好，但是当我尝试向文本字段中添加填充以具有多个视野归档的文本，这在我的代码中无效：

new Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        new Flexible(
          child: new TextField(
              decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(10)
              )
          ),
        ),
        new Flexible(
          child: new TextField(
              decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(10)
              )
          ),
        ),
        new Flexible(
          child: new TextField(
              decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(10)
              )
          ),
        ),
      ],
),

我想要像picutre bellow这样的东西：

如何为文本字段添加一些填充。而且我想知道，通过提交一个文本，有什么方法可以实现这一目标吗？

Answer 1

您可以在两者之间添加SizedBox。当您使用TextField时，Flexible会尝试获得最大大小，因此即使使用spaceBetween，中间也不会留有空间。

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    new Flexible(
      child: new TextField(
          decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10)
          )
      ),
    ),
    SizedBox(width: 20.0,),
    new Flexible(
      child: new TextField(
          decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10)
          )
      ),
    ),
    SizedBox(width: 20.0,),
    new Flexible(
      child: new TextField(
          decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10)
          )
      ),
    ),
  ],
),

您还可以在Padding周围使用TextField。

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    new Flexible(
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: new TextField(
            decoration: InputDecoration(
                contentPadding: EdgeInsets.all(10)
            )
        ),
      ),
    ),
    new Flexible(
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: new TextField(
            decoration: InputDecoration(
                contentPadding: EdgeInsets.all(10)
            )
        ),
      ),
    ),
    new Flexible(
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: new TextField(
            decoration: InputDecoration(
                contentPadding: EdgeInsets.all(10)
            )
        ),
      ),
    ),
  ],
),

多个文本字段连续填充

1 个答案: