[英]How to set text in one line for flutter
我在第4行文本字段中有用于下一个的flutter / dart代码:
Container(
margin: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: 100.0,
child: TextField(
maxLength: 2,
onChanged: (value) {
card.expMonth = int.parse(value);
},
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
decoration: InputDecoration(
border: InputBorder.none, hintText: 'month'),
)),
Text("/",
style: TextStyle(fontSize: 36),
textAlign: TextAlign.center),
Container(
width: 100.0,
child: TextField(
maxLength: 2,
onChanged: (value) {
card.expYear = int.parse(value);
},
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
decoration: InputDecoration(
border: InputBorder.none, hintText: 'year'),
)),
Container(
padding: EdgeInsets.only(left: 80.0),
width: 180.0,
child: TextField(
maxLength: 3,
onChanged: (value) {
card.cvc = int.parse(value);
},
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
decoration: InputDecoration(
border: InputBorder.none, hintText: 'cvc'),
)),
],
),
)
如何将所有文本字段都放在一行中。 在android应用中,我简单地使用指南或其他简单路径。 在这里,我用扑朔迷离的现实来粉碎,其中不同的文本字段具有相同的可见性,乍一看,这些参数
UPD .:我提供拐杖解决方案:
Padding(
padding: EdgeInsets.only(bottom: 20),
child: Text("/",
style: TextStyle(fontSize: 36),
textAlign: TextAlign.center),
),
但是我的想法很愚蠢
这就是我要做的:
Row(children: <Widget>[
Expanded(
child: TextField(
inputFormatters: [LengthLimitingTextInputFormatter(2)],
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
decoration: InputDecoration(
border: InputBorder.none, hintText: 'month'),
)),
Expanded(
child: Text("/",
style: TextStyle(fontSize: 36),
textAlign: TextAlign.center)),
Expanded(
child: TextField(
inputFormatters: [LengthLimitingTextInputFormatter(2)],
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
decoration: InputDecoration(
border: InputBorder.none, hintText: 'year'),
)),
Expanded(
child: TextField(
inputFormatters: [LengthLimitingTextInputFormatter(3)],
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
decoration: InputDecoration(
border: InputBorder.none, hintText: 'cvc'),
)),
])
产生此结果:
我使用了inputFormatters: [LengthLimitingTextInputFormatter(2)]
而不是maxLength
以便用户仍然只能输入有限的长度,但是由于看上去很整洁,因此您无法在TextField
下方找到计数器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.