flutter - 如何使用 maxLength 将文本字段和计数器放在同一行？

Question

如何使计数器和文字在同一行或同一行？当我使用 maxlength 时，计数器出现在文本字段下方。

Widget _nameTextField(String hintText) {
    return TextFormField(
      controller: TextEditingController(
        text: _template.name, 
      ),
      decoration: InputDecoration(
        hintText: hintText,
        contentPadding: EdgeInsets.all(15)
      ),
      cursorRadius: Radius.circular(10),
      keyboardType: TextInputType.text,
      autofocus: true,
      maxLength: 40,
      // maxLengthEnforced: true,
      validator: (val) {
        if (val.isEmpty) {
          return 'Please enter text.';
        } 
        return null;
      },
      onChanged: (val) {
        _template.name = val;
        print(val);
      },
    );
  }

Answer 1

将后缀文本和后缀样式添加到您的输入装饰中。像这样

Widget _nameTextField(String hintText) {
    return TextFormField(
      controller: TextEditingController(
        text: _template.name, 
      ),
      decoration: InputDecoration(
        hintText: hintText,
        contentPadding: EdgeInsets.all(15),
        suffixText: '11/40',
        suffixStyle: TextStyle(color: Colors.white)
      ),
      cursorRadius: Radius.circular(10),
      keyboardType: TextInputType.text,
      autofocus: true,
      maxLength: 40,
      // maxLengthEnforced: true,
      validator: (val) {
        if (val.isEmpty) {
          return 'Please enter text.';
        } 
        return null;
      },
      onChanged: (val) {
        _template.name = val;
        print(val);
      },
    );
  }