如何在Flutter中将两个TextFormField属性彼此对齐

时间:2019-04-04 23:19:14

标签: flutter flutter-layout

我需要帮助,在Flutter中将两个TextFormField彼此对齐,而不是在另一个之上对齐

我尝试使用填充,但是它不起作用。

             new TextFormField(
              autovalidate: true,
              keyboardType: TextInputType.numberWithOptions(),
              controller: today,
              //Reminder to write an if statement calling the controller
              //The validator receives the text that the user has entered.
              decoration: new InputDecoration(
                fillColor: Colors.white,
                border: new OutlineInputBorder(
                    borderRadius: new BorderRadius.circular(5.0),
                    borderSide: new BorderSide()
                ),
                labelText: 'Today', //Label is used so that the text can either float or remain in place
                labelStyle: TextStyle(
                  fontFamily: 'Lato',
                  fontWeight: FontWeight.normal,
                  fontSize: 14.0,
                  color: Colors.grey,
                ),
              ),
              inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
            ),

            SizedBox(height: 15.0),



            new TextFormField(
              autovalidate: true,
              keyboardType: TextInputType.numberWithOptions(),
              controller: tomorrow,

              //Reminder to write an if statement calling the controller
              //The validator receives the text that the user has entered.
              decoration: new InputDecoration(
                fillColor: Colors.white,
                border: new OutlineInputBorder(
                    borderRadius: new BorderRadius.circular(5.0),
                    borderSide: new BorderSide()
                ),
                labelText: 'Tomorrow', //Label is used so that the text can either float or remain in place
                labelStyle: TextStyle(
                  fontFamily: 'Lato',
                  fontWeight: FontWeight.normal,
                  fontSize: 14.0,
                  color: Colors.grey,
                ),
              ),
              inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
            ),

我希望表格的尺寸较小并且彼此对齐,以便它们适合屏幕。

1 个答案:

答案 0 :(得分:1)

尝试使用Row代替Column

        Row(children: [
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(hintText: "TextField 1"),
                  ),
                ),
                SizedBox(
                  width: 20,
                ),
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(hintText: "TextField 2"),
                  ),
                )
              ])

此处有更多信息:https://medium.com/flutter-community/breaking-layouts-in-rows-and-columns-in-flutter-8ea1ce4c1316