Flutter의 여러 줄 텍스트 필드

쉽게 들릴 수 있지만 어떻게 여러 줄로 편집 가능한 텍스트 필드를 flutter로 할 수 있습니까? TextField는 한 줄로만 작동합니다.

편집 : 명확하지 않은 것처럼 보이기 때문에 일부 정밀도. 텍스트 내용을 가상으로 감싸도록 여러 줄을 설정할 수 있지만 여전히 여러 줄이 아닙니다. 여러 줄로 표시되는 한 줄입니다. 이런 식으로하고 싶다면 할 수 없습니다. ENTER버튼에 대한 액세스 권한이 없기 때문 입니다. 그리고 Enter 버튼이 없다는 것은 여러 줄이 없음을 의미합니다.

자동 줄 바꿈을 사용하려면 다음 maxLines과 같이 설정하십시오 null.

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: null,
)

경우 maxLines속성입니다 null,이 라인의 수에는 제한 없으며, 랩이 활성화됩니다.

TextField가 사용자 입력에 맞게 조정되도록하려면 다음을 수행하십시오.

TextField(
    keyboardType: TextInputType.multiline,
    minLines: 1,//Normal textInputField will be displayed
    maxLines: 5,// when user presses enter it will adapt to it
    );

여기에서 최대 라인을 원하는대로 설정하면 갈 수 있습니다. 제 생각에 maxlines를 null로 설정하는 것은 좋은 선택이 아닙니다. 값을 설정해야합니다.

다른 사람들이 이미 "TextInputType.multiline"키보드 유형을 사용할 수 있다고 언급했지만, 나는 종종 입력 동작을 모방하기를 원하기 때문에 새 줄이 입력 될 때 높이를 자동으로 조정하는 TextField 구현을 추가하고 싶었습니다. WhatsApp 및 유사 앱.

이 목적을 위해 텍스트가 변경 될 때마다 입력에서 '\ n'채터의 수를 분석하고 있습니다. 이것은 과잉 인 것 같지만, 안타깝게도 지금까지 Flutter에서 더 나은 가능성을 찾지 못했고 구형 스마트 폰에서도 성능 문제를 발견하지 못했습니다.

class _MyScreenState extends State<MyScreen> {
  double _inputHeight = 50;
  final TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _textEditingController.addListener(_checkInputHeight);
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }

  void _checkInputHeight() async {
    int count = _textEditingController.text.split('\n').length;

    if (count == 0 && _inputHeight == 50.0) {
      return;
    }
    if (count <= 5) {  // use a maximum height of 6 rows 
    // height values can be adapted based on the font size
      var newHeight = count == 0 ? 50.0 : 28.0 + (count * 18.0);
      setState(() {
        _inputHeight = newHeight;
      });
    }
  }


  // ... build method here
  TextField(
    controller: _textEditingController,
    textInputAction: TextInputAction.newline,
    keyboardType: TextInputType.multiline,
    maxLines: null,
  )

이것을 사용하십시오

TextFormField(
      keyboardType: TextInputType.multiline,
      maxLines: //Number_of_lines(int),)

TextField이 maxLines의 속성을.

사용 expands당신은 줄 필요가 없습니다 minLines또는 maxLines특정 값 :

TextField(
  maxLines: null,
  expands: true, 
  keyboardType: TextInputType.multiline,
)

위의 경우 한 번 작동하지 않으면 minLines 도 추가하십시오.

TextField(
        keyboardType: TextInputType.multiline,
        minLines: 3,
        maxLines: null);

TextInputAction.newline 을 지정 하여 TextField 가 Enter 키에 응답하고 여러 줄 입력을 허용하도록 합니다 .

textInputAction: TextInputAction.newline,

공식 문서 상태 : maxLines속성을 null로 설정하여 줄 수에 대한 제한을 제거 할 수 있습니다. 기본적으로 1입니다. 즉, 한 줄 텍스트 필드입니다.

참고 : maxLines 0이 아니어야합니다.

들어 TextFormField 위젯 은 라인의 설정 수정 번호를 원하는 경우, 당신은 minLines 및 maxLines을 설정할 수 있습니다. 그렇지 않으면 maxLines를 null로 설정할 수도 있습니다.

TextFormField(
      minLines: 5,
      maxLines: 7,
      decoration: InputDecoration(
          hintText: 'Address',
          border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
          ),
      ),
),

   TextFormField(
                  minLines: 2,
                  maxLines: 5,
                  keyboardType: TextInputType.multiline,
                  decoration: InputDecoration(
                    hintText: 'description',
                    hintStyle: TextStyle(
                      color: Colors.grey
                    ),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(20.0)),
                    ),
                  ),
                ),