개발하자

펄럭이는 텍스트의 최소 높이 설정

Cuire 2022. 12. 3. 02:18
반응형

펄럭이는 텍스트의 최소 높이 설정

나는 컨테이너에 텍스트 파일이 있고, 나는 텍스트 파일 지원 다중 라인을 원한다. 그래서 나는 컨테이너의 높이를 설정할 수 없다. 하지만 단어가 없을 때 텍스트 필드의 기본 높이를 어떻게 설정하는가? 나는 Padding이라는 컨텐츠를 시도해 보았지만, 작동하지 않는다. 제 코드는 다음과 같습니다.

TextField(
                              controller: _textEditingController,
                              decoration: InputDecoration(
                                hintText: "留下你的评论吧~",
                                contentPadding: EdgeInsets.only(left: getMyWidth(10), right: getMyWidth(10)),
                                fillColor: default_bg,
                                filled: true,
                                border: OutlineInputBorder(borderSide: BorderSide.none, borderRadius: BorderRadius.all(Radius.circular(getMyWidth(5)))),
                              ),
                              style: makeBlackStyle(),
                              keyboardType: TextInputType.multiline,
                              maxLines: null,
                              cursorColor: themeColor,
                              onChanged: (str) {
                                setState(() {
                                  inputStr = str;
                                });
                              },
                            )

그래서, 내 질문은: 단어가 없을 때 텍스트 필드의 기본 높이를 설정하는 방법은 무엇입니까? 텍스트 파일의 기본 높이를 줄이고 지원 멀티라인이 필요합니다.



'minLines: 2'를 사용할 수 있으며, 입력한 줄 수의 높이를 알 수 있습니다. 도움이 되었으면 좋겠다.



의 can set을 사용하여 최대 높이를 설정할 수 있습니다. maxLines를 설정해도 다중 회선이 지원됩니다.

TextField(
maxLines: 5
)


https://github.com/flutter/flutter/issues/27838

승인된 답변 사용 -> 내용패딩:

TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8.0),//here  set your padding
https://github.com/flutter/flutter/issues/27838#issuecomment-507603179

또는

new Container(
width:80.0
child:new TextField
)


당신은 다음을 사용할 수 있습니다. 저는 제 프로젝트 중 하나에도 사용하고 있습니다. 용기에 포장하고 용기 자체의 크기를 변경합니다. 그런 다음 a를 추가하여 입력을 더 작게 만듭니다.

Container(
    height 56, // Optional to decrease/increase
    child: TextField(
    decoration: InputDecoration(
        contentPadding: EdgeInsets.all(8.0), // Increase to make smaller
        prefixIcon: icon,
        labelText: 'Label',
        hintText: 'Hint',
        border: null,
    ),
    minLines: 1,
    maxLines: null // Adds support for multiple lines
));


텍스트 필드에 줄을 표시하려면 코드를 다음으로 바꿉니다.

TextField(
  minLines: 3,
  controller: _textEditingController,
  decoration: InputDecoration(
    hintText: "留下你的评论吧~",
    contentPadding: EdgeInsets.only(left: getMyWidth(10), right: getMyWidth(10)),
    fillColor: default_bg,
    filled: true,
    border: OutlineInputBorder(borderSide: BorderSide.none, borderRadius: BorderRadius.all(Radius.circular(getMyWidth(5)))),
  ),
  style: makeBlackStyle(),
  keyboardType: TextInputType.multiline,
  maxLines: null,
  cursorColor: themeColor,
  onChanged: (str) {
    setState(() {
      inputStr = str;
    });
  },
)


just set is Dense : true in decoration.



을 시작하다

  • : NUMBER, // 기본값: 1
  • : NUMBER 또는 null, // null: 여러 줄 지원

을 시작하다

  • : true // 사용하는 수직 공간이 적음, 기본값: false

당신에게 도움이 되었으면 좋겠어요 😘💕


반응형