Flutter——Widget(4)、TextField

입력 상자 컨트롤 TextField

입력 내용 controller를 가져옵니다TextEditingController userNameController = TextEditingController();,userNameController.text에서 해당 TextField 컨트롤의 입력 내용을 가져옵니다.

keyboardType은 입력 유형을 지정합니다.TextInputType에서 text,, number, phone, datetime, emailAddress, url 등의 값을 가져옵니다.

textInputAction은 Enter 키 유형 변경 사항을 지정합니다.TextInputAction에서 done、go、search、send、next 등의 값을 가져옵니다.변경 유형의 리턴 키를 눌렀을 때의 응답 이벤트를 지정하기 위해 onEditingComplete를 설정해야 합니다.next로 지정하면 암호 입력 상자 onEditingComplete: () => FocusScope.of(context).requestFocus(pwdNode) 로 이동하는 방법을 지정합니다. 그 중에서 FocusNode pwdNode = FocusNode(); 는 암호의 입력 컨트롤에 지정됩니다. focusNode: pwdNode

obscureText 입력 내용이 숨겨져 있는지 여부.암호 입력 상자가true로 설정되었습니다.

maxLines 최대 줄 수, 기본값은 1입니다.

maxLength 최대 입력 문자 길이입니다.

InputDecoration.

icon은 입력 상자의 아이콘을 설정합니다.예를 들어 icon: Icon(Icons.account_box)는 입력 상자 왼쪽에 시스템이 가지고 있는 계정 아이콘을 표시한다.입력 상자가 활성화된 상태에서도 아이콘의 색상이 변경됩니다.

prefixIcon은 icon과 유사하지만 아이콘은 입력 상자 밑줄에 표시됩니다.

prefix는prefixIcon과 유사하여 텍스트를 표시하는 것과 같은 컨트롤을 사용자 정의할 수 있습니다.prefix: Text(" ") .

prefixText prefix는 Text로 지정되며 앞에 고정적으로 표시되는 문자열 접두사를 설정합니다.만약 핸드폰 번호를 입력하면 앞에 고정+86:prefixText: "+86".

suffixIcon,suffix,suffixText는prefixIcon,prefix,prefixText와 유사하지만 뒤에 표시됩니다.suffixText는 단위 설정 등 끝부분에 고정된 표시를 사용할 수 있습니다.

labelText 알림 문안, 안드로이드와 유사한 Hint는 입력 상자가 활성화될 때 애니메이션을 위로 이동합니다.

helperText가 입력 상자 아래에 있는 도움말 문안을 표시합니다.일반적으로 설정하지 않습니다.

hintText는 입력 상자를 활성화하지만 내용을 입력하지 않았을 때의 알림 문안입니다.만약 labelText가 존재한다면, 활성화되지 않은 상태에서는 labelText를 표시하고, 그렇지 않으면 활성화되지 않은 상태에서hintText를 표시합니다.

프로세스 중에 해결된 버그:
1. Column을 SingleChildScrollView로 중첩하는 입력 상자가 있습니다.그렇지 않으면 입력 키보드를 팝업할 때 버그가 초과됩니다:bottom overflowed by X PIXELS.
2. 실행 안드로이드 오류: Flutter Socket Exception: Failed to create server socket(OS Error: Permission denied,errno = 13),address = 127.0.0.1,port = 0.android 프로젝트 안드로이드 매니페스트에서.xml 설정

3. AppBar에서 제목은 기본적으로 왼쪽으로 표시되고 속성을 설정하여 제목을 수평으로 가운데로 설정합니다.

centerTitle: true, //  title  

로그인 인터페이스를 구현하는 코드는 다음과 같습니다.

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class Login extends StatefulWidget {
  @override
  State createState() => LoginState();
}

class LoginState extends State {
  //        
  final TextEditingController userNameCtrl = TextEditingController();

  //      
  final TextEditingController passwordCtrl = TextEditingController();

  //             
  FocusNode pwdNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
            title: Text("  "),
            centerTitle: true, //  title  
            leading: new BackButton()),
        //     ， SingleChildScrollView  Column。            bug。bottom overflowed by X PIXELS
        body: SingleChildScrollView(
            child: Column(
          children: [
            new Padding(
              padding: EdgeInsets.fromLTRB(40, 24, 40, 0),
              child: TextField(
                controller: userNameCtrl,
                //               
                keyboardType: TextInputType.phone,
                //      ，     。       。
                textInputAction: TextInputAction.next,
                //                ：           
                onEditingComplete: () =>
                    FocusScope.of(context).requestFocus(pwdNode),
                maxLength: 11,
                decoration: InputDecoration(
                  icon: Icon(Icons.account_circle),
                  labelText: "      ",
//                  helperText: "       ", //      
                  hintText: "11     ",
//                  prefixIcon: Icon(Icons.account_circle), //      
//                  prefix: Text("   "),
//                  prefixText: "+86",
                ),
              ),
            ),
            new Padding(
              padding: EdgeInsets.fromLTRB(40, 4, 40, 0),
              child: TextField(
                controller: passwordCtrl,
                focusNode: pwdNode,
                keyboardType: TextInputType.text,
                //      ，    
                textInputAction: TextInputAction.done,
                maxLength: 11,
                obscureText: true,
                //     ，  
                decoration: InputDecoration(
                  icon: Icon(Icons.lock_outline),
                  labelText: "     ",
//                  suffixIcon: Icon(Icons.visibility_off),
//                  suffixText: "( )",
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(40, 36, 40, 0),
              child: Row(children: [
                new Expanded(
                    child: RaisedButton(
                  color: Colors.blue,
                  onPressed: () {
                    doLogin();
                  },
                  child: new Text(
                    "  ",
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                ))
              ]),
            ),
          ],
        )));
  }

  void doLogin() {
    if (userNameCtrl.text.isEmpty || passwordCtrl.text.isEmpty) {
      Fluttertoast.showToast(msg: "         ");
    } else {
      Fluttertoast.showToast(
          msg: "   : ${userNameCtrl.text}，  : ${passwordCtrl.text}");
    }
  }
}

효과 실현: 본문 원본 코드:TAG, 원본 코드를 다운로드하려면 tag를 지정해야 합니다.