如何让输入框和按钮并排显示?就是发送短信验证码的样式

先贴上我想实现的效果图

我参考了很多篇文章,但是样式这块有些看不懂,所以打算自己来写。
但是出现了一个问题,就是输入框和按钮不能并排显示。
贴上我的代码:

child: new Form(
        key: _globalKey,
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            TextFormField(
              maxLength: 20,
              controller: _userPhone,
              style: TextStyle(color: Colors.white),
              decoration: InputDecoration(
                  counterText: "",
                  labelText: "手机号",
                  labelStyle: TextStyle(
                    color: Colors.white,
                  ),
                  hintText: "请输入手机号",
                  hintStyle: TextStyle(
                    color: Colors.white,
                  ),
                  icon: Icon(
                    Icons.mobile_screen_share,
                    color: Colors.white,
                  )),
              validator: (v) {
                return v.trim().length > 0 ? null : "手机号不能为空";
              },
            ),
            //主要代码↓
            new Row(
              children: <Widget>[
                TextFormField(
                  maxLength: 6,
                  controller: _yzm,
                  style: TextStyle(color: Colors.white),
                  decoration: InputDecoration(
                      counterText: "",
                      labelText: "验证码",
                      labelStyle: TextStyle(
                        color: Colors.white,
                      ),
                      hintText: "请输入6位短信验证码",
                      hintStyle: TextStyle(
                        color: Colors.white,
                      ),
                      icon: Icon(
                        Icons.message,
                        color: Colors.white,
                      )),
                  validator: (v) {
                    return v.trim().length > 0 ? null : "手机号不能为空";
                  },
                ),
                RaisedButton(
                  shape: RoundedRectangleBorder(
                    side: new BorderSide(
                      style: BorderStyle.solid,
                    ),
                    borderRadius: BorderRadius.only(
                      topRight: Radius.circular(10.0),
                      topLeft: Radius.circular(100.0),
                      bottomLeft: Radius.circular(10.0),
                      bottomRight: Radius.circular(100.0),
                    ),
                  ),
                ),
              ],
            ),
            //主要代码↑
            TextFormField(
              maxLength: 18,
              controller: _onePwd,
              style: TextStyle(color: Colors.white),
              decoration: InputDecoration(
                counterText: "",
                labelText: "输入密码",
                labelStyle: TextStyle(
                  color: Colors.white,
                ),
                hintText: "输入密码",
                hintStyle: TextStyle(
                  color: Colors.white,
                ),
                icon: Icon(
                  Icons.lock,
                  color: Colors.white,
                ),
              ),
              validator: (v) {
                return v.trim().length > 5 && v.trim().length < 18
                    ? null
                    : "密码长度6位至18位";
              },
              obscureText: true,
            ),
            TextFormField(
              maxLength: 18,
              controller: _twoPwd,
              style: TextStyle(color: Colors.white),
              decoration: InputDecoration(
                counterText: "",
                labelText: "再次输入密码",
                labelStyle: TextStyle(
                  color: Colors.white,
                ),
                hintText: "再次输入密码",
                hintStyle: TextStyle(
                  color: Colors.white,
                ),
                icon: Icon(
                  Icons.lock,
                  color: Colors.white,
                ),
              ),
              validator: (v) {
                return v.trim().length > 5 && v.trim().length < 18
                    ? null
                    : "密码长度6位至18位";
              },
              obscureText: true,
            ),
          ],
        ),
      ),

这样改的话,就会导致整个表单都消失了
想问问是因为什么原因?

讨论数量: 5

2种方式,1、Row。2、Stack、Positioned。

3年前 评论
medz

第三种:

InputDecoration(
   /// ...
    suffix: Widget
)
3年前 评论

Row 包裹 Explend才可以

3年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!