[英]How to set text in one line for flutter
I have next flutter/dart code for make in one line 4 text field: 我在第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'),
)),
],
),
)
How make all text fields in one line. 如何将所有文本字段都放在一行中。 In android app i simple use guideline or other simple paths.
在android应用中,我简单地使用指南或其他简单路径。 And here i smash with flutter reality where different textfields have different visibility with the same, at first glance, the parameters
在这里,我用扑朔迷离的现实来粉碎,其中不同的文本字段具有相同的可见性,乍一看,这些参数
UPD.: I make crutch solution: UPD .:我提供拐杖解决方案:
Padding(
padding: EdgeInsets.only(bottom: 20),
child: Text("/",
style: TextStyle(fontSize: 36),
textAlign: TextAlign.center),
),
but it's stupid how i think 但是我的想法很愚蠢
This is how I would do it: 这就是我要做的:
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'),
)),
])
Which produces this: 产生此结果:
I used inputFormatters: [LengthLimitingTextInputFormatter(2)]
instead of maxLength
so that the user is still only able to enter in a limited length but you don't get the counter below the TextField
as it looks neater. 我使用了
inputFormatters: [LengthLimitingTextInputFormatter(2)]
而不是maxLength
以便用户仍然只能输入有限的长度,但是由于看上去很整洁,因此您无法在TextField
下方找到计数器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.