如何让输入框和按钮并排显示?就是发送短信验证码的样式
先贴上我想实现的效果图
我参考了很多篇文章,但是样式这块有些看不懂,所以打算自己来写。
但是出现了一个问题,就是输入框和按钮不能并排显示。
贴上我的代码:
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,
),
],
),
),
这样改的话,就会导致整个表单都消失了
想问问是因为什么原因?
2种方式,1、Row。2、Stack、Positioned。
stack会好一些
第三种:
Row 包裹 Explend才可以