Question

我需要按顶部输入字段对齐底部输入字段。喜欢：这是我的代码：

class CustomerInput extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
              child: TextField(),
            ),
            RaisedButton(
              child: Icon(Icons.search),
              onPressed: () {},
            ),
          ],
          //   ),
        ),
          TextField(
            enabled: false,
          )
      ],
    );
  }
}

如何做到？

Answer 1

在此代码中， TextField 的 flex 属性为 3 ，而 RaisedButton 为 1

“它们的总和等于4”

文本字段将扩展为 3/4 或 75％，而 RaisedButton 将扩展为 1/4 或 25％

通过这种概念，我创建了新的行并放入其中

TextField 其 flex 等于排名第一。
容器，其 flex 等于 Raisedbutton的弯曲。

，修改后的代码是：

      `

      Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
              flex: 3,
              child: TextField(),
            ),
            Expanded(
              flex: 1,
              child: RaisedButton(
                child: Icon(Icons.search),
                onPressed: () {},
              ),
            ),
          ],
          //   ),
        ),
        Row(
          children: <Widget>[
            Expanded(
              flex: 3,
              child: TextField(
                enabled: false,
              ),
            ),
            Expanded(
              child: Container(),
              flex: 1,
            )
          ],
        )
      ],
    ))

`

Answer 2

以下代码将根据需要提供确切的视图。在第二个原始文件中，您将仅为edittext / textview添加一个TextFormField / TextField。

     Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  flex: 3,
                  child: TextFormField(

                  ),
                ),
                Expanded(
                  flex: 1,
                  child: RaisedButton(
                    child: Icon(Icons.search),
                    onPressed: () {},
                  ),
                ),
              ],
              //   ),
            ),
            Row(
              children: <Widget>[
                Expanded(
                  child: TextFormField(
                  ),
                )
              ],
            )
          ],
        ));

如何将toptom TextField与顶部TextField对齐？

2 个答案: