dart - 如何在一行中设置文本以进行颤动

Question

我在第 4 行文本字段中有下一个颤振/飞镖代码：

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),
                ),

但我的想法很愚蠢

标签： dartflutter

Answer 1

我会这样做：

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因为它看起来更整洁。