Flutter에서 TextField 높이와 너비를 변경하는 방법은 무엇입니까?

TextField 필드란 무엇입니까?

사용자가 키보드 입력을 앱으로 가져올 수 있게 해주는 가장 인기 있는 텍스트 입력 위젯은 Flutter의 TextField입니다.

TextField 또는 TextBox라고 하는 입력 요소는 이름, 암호, 주소 등과 같은 영숫자 정보를 저장합니다. 사용자가 프로그래밍 가능한 코드를 사용하여 텍스트를 입력할 수 있는 GUI 제어 요소입니다.

TextField의 문제는

페이지에 TextField를 추가하면 부모가 활성화한 최대 텍스트 줄을 포함하도록 기본 너비와 높이가 구성됩니다.

기본적으로 TextField 높이는 텍스트 글꼴 크기에 따라 달라지며 너비는 장치의 화면 너비입니다.

Flutter에서 16진수 색상 문자열을 사용하는 방법에 대한 최신 가이드를 확인하세요.

TextField의 높이 설정

TextField의 높이를 조정하는 세 가지 방법이 있습니다. MaxLines-MinLines 속성을 사용하여 새 텍스트가 입력될 때 TextField의 전체 높이를 늘릴 수 있으며 글꼴 크기 및 콘텐츠 패딩을 사용하여 높이를 높이고 한 줄 콘텐츠를 활성화할 수 있습니다.

TextField의 높이를 늘리려면 글꼴 크기를 변경하십시오.

TextField에는 style:TextStyle() 속성이 있습니다.

텍스트 스타일 내부에는 글꼴 크기라는 속성이 있습니다. 그런 다음 적절한 글꼴 크기를 지정하십시오.

TextField(
 decoration: InputDecoration(
   border: OutlineInputBorder(),
   labelText: 'Please search here ',
 ),
 style: TextStyle(fontSize: 25),
),

산출:



TextField의 높이를 높이기 위해 텍스트 패딩 추가

InputDecoration()에는 contentPadding이라는 속성이 있습니다.

TextField(
 decoration: InputDecoration(
     labelText: 'Please search here ',
     contentPadding: EdgeInsets.all(25),
   border: OutlineInputBorder(),
 ),
 style: TextStyle(fontSize: 25),
),

산출

TextField의 높이를 늘리는 Maxine's-MinLines 속성

확장된 텍스트가 입력된 TextField의 높이를 늘리려면 MaxLines 및 MinLines 속성을 사용할 수 있습니다.

TextField(
 decoration: InputDecoration(
   labelText: 'Please search here ',
   contentPadding: EdgeInsets.all(8),
   border: OutlineInputBorder(),
 ),
 style: TextStyle(fontSize: 25),
 maxLines: 3,
 minLines: 2,
),

산출

TextField 너비 변경
TextField 너비를 설정하려면 SizedBox 위젯 안에 TextField를 래핑하고 너비를 지정할 수 있습니다.

SizedBox(
 width: 250,
 child: TextField(
   decoration: InputDecoration(
     labelText: 'Please search here ',
     contentPadding: EdgeInsets.all(8),
     border: OutlineInputBorder(),
   ),
   style: TextStyle(fontSize: 25),
   maxLines: 3,
   minLines: 2,
 ),
),

산출

결론

지금까지 TextField 위젯을 사용하여 Flutter에서 높이와 너비를 변경하는 방법을 배웠습니다. 사용자가 입력을 채우는 텍스트 필드의 높이와 너비를 설정하는 데 특별히 사용되는 TextField 위젯의 사용법을 배웠습니다.