플러터 텍스트 필드로 딥 다이빙

Flutter의 TextFields 기능에 대한 자습서

이 글은 Flutter가 제공하는 몇 가지 위젯과 팁과 요령을 자세하게 설명하는 일련의 기사 중 두 번째 기사입니다. 마지막 기사에서는 ListView 위젯을 자세히 살펴 보았습니다. 이 기사에서는 Flutter TextField 위젯을 포괄적으로 살펴보고 기능과 가능한 사용자 정의를 찾아 본다.

TextField 소개

TextField 위젯을 사용하면 사용자의 정보를 수집 할 수 있습니다. 기본 TextField의 코드는 다음과 같이 간단합니다.

TextField ()

기본 TextField가 생성됩니다.

TextField에서 정보 검색

TextFields에는 Android와 같은 ID가 없으므로 요청시 텍스트를 검색 할 수 없으며 변경시 변수에 저장하거나 컨트롤러를 사용해야합니다.

  1. 가장 쉬운 방법은 onChanged 메소드를 사용하고 현재 값을 간단한 변수에 저장하는 것입니다. 샘플 코드는 다음과 같습니다.
문자열 값 = "";
텍스트 필드 (
  onChanged : (텍스트) {
    값 = 텍스트;
  },
)

이를 수행하는 두 번째 방법은 TextEditingController를 사용하는 것입니다. 컨트롤러는 TextField에 연결되어 있으며 TextField의 텍스트도 듣고 제어 할 수 있습니다.

TextEditingController controller = TextEditingController ();
텍스트 필드 (
  컨트롤러 : 컨트롤러,
)

그리고 우리는

controller.addListener (() {
  // 여기서 뭔가를하세요
});

다음을 사용하여 값을 얻거나 설정하십시오.

인쇄 (controller.text); // 현재 값 인쇄
controller.text = "데모 텍스트"; // 새로운 값을 설정

TextField의 다른 콜백

TextField 위젯은 다음과 같은 다른 콜백도 제공합니다.

  1. onEditingCompleted
  2. 제출
onEditingComplete : () {},
onSubmitted : (값) {},

이는 사용자가 iOS에서 "완료"버튼을 클릭 할 때와 같은 동작으로 호출되는 콜백입니다.

TextField에서 포커스 작업

TextField에 "초점"이 있으면 TextField가 활성화되어 있고 키보드에서 입력하면 포커스가있는 TextField에 데이터가 입력됩니다.

1. 자동 초점 작업

위젯이 작성 될 때 TextField에 자동 초점을 맞추려면 자동 초점 필드를 true로 설정하십시오.

텍스트 필드 (
  자동 초점 : true,
),

기본적으로 TextField에 포커스가 설정됩니다.

포커스는 기본적으로 TextField로 이동합니다.

2. 사용자 정의 포커스 변경 작업

자동 초점뿐만 아니라 필요에 따라 초점을 변경하려면 어떻게해야합니까? 다음에 초점을 맞출 TextField를 참조 할 수있는 방법이 필요하므로 FocusNode를 TextField에 연결하고 포커스를 전환하는 데 사용합니다.

// 빌드 메소드 외부에서 초기화
FocusNode nodeOne = FocusNode ();
FocusNode nodeTwo = FocusNode ();
// 빌드 메소드 내에서이를 수행하십시오.
텍스트 필드 (
  focusNode : nodeOne,
),
텍스트 필드 (
  focusNode : nodeTwo,
),
RaisedButton (
  onPressed : () {
    FocusScope.of (컨텍스트) .requestFocus (nodeTwo);
  },
  자식 : Text ( "Next Field"),
),

두 개의 포커스 노드를 만들어 TextField에 연결합니다. 버튼을 누르면 FocusScope를 사용하여 다음 TextField에 포커스를 요청합니다.

버튼을 누르면 포커스가 변경됩니다

텍스트 필드의 키보드 속성 변경

Flutter의 TextField를 사용하면 키보드와 관련된 속성도 사용자 지정할 수 있습니다.

1. 키보드 타입

TextField를 사용하면 TextField에 포커스가있을 때 표시되는 키보드 유형을 사용자 정의 할 수 있습니다. 이에 대한 keyboardType 속성을 변경합니다.

텍스트 필드 (
  keyboardType : TextInputType.number,
),

유형은 다음과 같습니다.

  1. TextInputType.text (일반 키보드)
  2. TextInputType.number (숫자 키보드)
  3. TextInputType.emailAddress ( "@"가있는 일반 키보드)
  4. TextInputType.datetime ( "/"및 ":"이있는 숫자 키보드)
  5. TextInputType.numberWithOptions (서명 및 10 진수 모드를 활성화하는 옵션이있는 숫자 키보드)
  6. TextInputType.multiline (여러 줄 정보에 최적화)

2. TextInputAction

textField의 TextInputAction을 변경하면 키보드 자체의 동작 버튼을 변경할 수 있습니다.

예로서:

텍스트 필드 (
  textInputAction : TextInputAction.continueAction,
),

그러면 "완료"버튼이 "계속"버튼으로 대체됩니다.

또는

텍스트 필드 (
  textInputAction : TextInputAction.send,
),

원인

전체 목록이 너무 커서 여기에 표시되지 않지만 반드시 확인하십시오.

3. 자동 수정

특정 TextField에 대한 자동 고침을 활성화하거나 비활성화합니다. 자동 수정 필드를 사용하여이를 설정하십시오.

텍스트 필드 (
  자동 수정 : 거짓,
),

제안도 비활성화됩니다.

4. 텍스트 대문자

TextField는 사용자 입력에서 문자를 대문자로 표시하는 방법에 대한 몇 가지 옵션을 제공합니다.

텍스트 필드 (
  textCapitalization : TextCapitalization.sentences,
),

유형은 다음과 같습니다.

  1. TextCapitalization. 문장

이것은 우리가 기대하는 일반적인 유형의 대문자이며, 모든 문장의 첫 글자는 대문자입니다.

2. TextCapitalization.characters

문장의 모든 문자를 대문자로 표시하십시오.

3. TextCapitalization.words

각 단어의 첫 글자를 대문자로 표기하십시오.

텍스트 스타일, 정렬 및 커서 옵션

Flutter를 사용하면 TextField 내부의 커서뿐만 아니라 TextField 내부의 텍스트 스타일 및 정렬과 관련된 사용자 정의가 가능합니다.

TextField 내부의 텍스트 정렬

textAlign 속성을 사용하여 커서가 TextField 내부에있는 위치를 조정하십시오.

텍스트 필드 (
  textAlign : TextAlign.center,
),

그러면 커서와 텍스트가 TextField 중간에서 시작됩니다.

여기에는 일반적인 정렬 속성이 있습니다 : 시작, 끝, 왼쪽, 오른쪽, 가운데, 자리 맞추기.

TextField 내부의 텍스트 스타일링

style 속성을 사용하여 TextField 내부의 텍스트 모양을 변경합니다. 색상, 글꼴 크기 등을 변경하는 데 사용합니다. 이것은 텍스트 위젯의 스타일 속성과 유사하므로 탐색하는 데 너무 많은 시간을 소비하지 않습니다.

텍스트 필드 (
  스타일 : TextStyle (색상 : Colors.red, fontWeight : FontWeight.w300),
),

TextField에서 커서 변경

커서는 TextField 위젯에서 직접 사용자 정의 할 수 있습니다.

커서 색상, 너비 및 모서리 반경을 변경할 수 있습니다. 예를 들어, 여기서는 명백한 이유없이 원형 ​​빨간색 커서를 만듭니다.

텍스트 필드 (
  cursorColor : Colors.red,
  cursorRadius : 반지름 원형 (16.0),
  cursorWidth : 16.0,
),

TextField에서 크기 및 최대 길이 제어

TextFields는 그 안에 쓰여진 최대 문자 수, 최대 행 수를 제어하고 텍스트를 입력함에 따라 확장 할 수 있습니다.

최대 문자 제어

텍스트 필드 (
  최대 길이 : 4,
),

maxLength 속성을 설정하면 최대 길이가 적용되고 기본적으로 TextField에 카운터가 추가됩니다.

확장 가능한 TextField 만들기

때로는 한 줄이 끝나면 확장되는 TextField가 필요합니다. Flutter에서는 약간 이상합니다 (아직 쉽지는 않습니다). 이를 위해 maxLines를 null로 설정합니다 (기본적으로 1). null로 설정하는 것은 우리에게 익숙하지 않지만 그럼에도 불구하고 쉬운 일입니다.

참고 : maxLines를 직접 값으로 설정하면 기본적으로 해당 행 수로 확장됩니다.

텍스트 필드 (
  maxLines : 3,
)

모호한 텍스트

TextField에서 텍스트를 가리려면 obscureText를 true로 설정하십시오.

텍스트 필드 (
  obscureText : true,
),

마지막으로 TextField 꾸미기

지금까지 Flutter가 입력을 위해 제공하는 기능에 중점을 두었습니다. 이제 실제로 멋진 TextField를 디자인하고 디자이너에게 대답하지 않는 것으로 넘어갑니다.

TextField를 꾸미려면 InputDecoration을 취하는 데코레이션 속성을 사용합니다. InputDecoration 클래스는 엄청 나기 때문에 대부분의 중요한 속성을 빠르게 살펴볼 것입니다.

힌트 및 레이블 속성을 사용하여 사용자에게 정보를 제공하십시오.

힌트와 레이블은 모두 사용자가 TextField에 입력 할 정보를 이해하는 데 도움이되는 문자열입니다. 차이점은 사용자가 입력을 시작하면 레이블이 TextField 위에 떠 다니면 힌트가 사라진다는 것입니다.

힌트상표

"icon", "prefixIcon"및 "suffixIcon"을 사용하여 아이콘을 추가 할 수 있습니다.

TextFields에 아이콘을 직접 추가 할 수 있습니다. 대신 텍스트에 prefixText 및 suffixText를 사용할 수도 있습니다.

텍스트 필드 (
  장식 : InputDecoration (
    아이콘 : 아이콘 (Icons.print)
  ),
),
icon 속성을 사용하는 아이콘
텍스트 필드 (
  장식 : InputDecoration (
    prefixIcon : 아이콘 (Icons.print)
  ),
),
prefixIcon 속성을 사용하는 아이콘

다른 위젯과 마찬가지로“prefixIcon”대신“prefix”를 사용하십시오

아이콘 대신 일반 위젯을 사용하려면 접두사 필드를 사용하십시오. 명백한 이유없이 다시 TextField에 순환 진행률 표시기를 추가하겠습니다.

텍스트 필드 (
  장식 : InputDecoration (
    접두사 : CircularProgressIndicator (),
  ),
),

힌트, 레이블 등과 같은 각 속성에는 해당 스타일 필드가 있습니다.

힌트 스타일을 지정하려면 hintStyle을 사용하십시오. 레이블의 스타일을 지정하려면 labelStyle을 사용하십시오.

텍스트 필드 (
  장식 : InputDecoration (
    hintText : "데모 텍스트",
    hintStyle : TextStyle (fontWeight : FontWeight.w300, 색상 : Colors.red)
  ),
),

참고 :이 예제에서 수행했지만 일반적으로 힌트 색상은 사용자에게 혼란을 주므로 변경하지 마십시오.

레이블을 원하지 않지만 사용자에게 지속되는 메시지를 원하는 경우 "helperText"를 사용하십시오.

텍스트 필드 (
  장식 : InputDecoration (
    helperText : "안녕하세요"
  ),
),

“장식 : null”또는 InputDecoration.collapsed를 사용하여 TextField에서 기본 밑줄을 제거하십시오.

이를 사용하여 TextField에서 기본 밑줄을 제거하십시오.

텍스트 필드 (
  장식 : InputDecoration.collapsed (힌트 텍스트 : "")
),

“테두리”를 사용하여 TextField에 테두리를 제공하십시오

텍스트 필드 (
  장식 : InputDecoration (
    테두리 : OutlineInputBorder ()
  )
),

더 많은 장식을 할 수 있지만 한 기사에서 모든 것을 다룰 수는 없습니다. 그러나 이것이 Flutter TextFields를 사용자 정의하는 것이 얼마나 쉬운 지 이해하기를 바랍니다.

이 기사가 끝났습니다! 나는 당신이 그것을 즐겼기를 바랍니다. Flutter 기사를 더 보려면 저를 따르십시오.

다른 프로파일과 기사도 자유롭게 확인하십시오.

트위터

깃 허브

내 다른 기사 중 일부