如何將文本設置為一行

Question

我在第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),
                ),

但是我的想法很愚蠢

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下方找到計數器。