Flutter의 기본 구성요소 중 TextField 구성요소 입력란의 장식 속성에 대한 간략한 이해

장식

장식 속성은 입력 상자의 장식을 설정하는 데 사용됩니다. 속성 값은 InputDecoration 유형입니다. 입력 상자의 모양과 프롬프트 메시지의 스타일을 제어합니다.

InputDecoration은 입력 상자의 프롬프트 정보 스타일의 공통 속성을 제어합니다.

(1) 아이콘 :
입력창 왼쪽에 표시할 아이콘을 설정합니다.
(2) labelText: 입력 상자의 설명 정보를 설정합니다.입력 상자가 포커스를 받으면 기본적으로 맨 위로 뜨게 됩니다.
(3) helperText: 입력란 아래에 있는 입력란 보조정보를 설정합니다.
(4) errorText: 입력란의 내용이 잘못 입력되었을 때의 오류 메시지를 설정합니다.
(5) 힌트텍스트: 입력창에 프롬프트 정보를 설정합니다. 이 속성은 hintStyle 속성과 함께 사용할 수 있으며, intStyle 속성은 입력란에 입력되는 프롬프트 정보의 텍스트 스타일을 설정하는 데 사용되며 속성 값은 TextStyle 유형입니다.

    decoration: InputDecoration(
            icon: Icon(Icons.person),
            labelText: '用户名',
            labelStyle: TextStyle(color: Colors.black),
            helperText: '用户名只能由字母和数字组成',
            helperStyle: TextStyle(color: Colors.grey),
            errorText: '用户名格式错误',
          errorStyle: TextStyle(color:Colors.red),
          hintText: '请输入用户名',
          hintStyle: TextStyle(color: Colors.black12)
        ),

(6) prefixlcon: 입력창에 전면 아이콘을 설정하며 사용 방법은 icon 속성과 동일하나 icon 속성으로 설정한 아이콘의 우측에 아이콘이 위치합니다.
(7) prefixText: 입력 상자에 사전 텍스트를 설정합니다. 이 속성은 prefixStyle 속성과 함께 사용할 수 있습니다. prefixStyle 속성은 입력 상자에 사전 텍스트 스타일을 설정하는 데 사용되며 속성 값은 유형입니다. 텍스트 스타일.
(8) suffixlcon : 후면 아이콘을 입력창에 설정하며 사용방법은 icon 속성과 동일하나 아이콘은 입력창 우측에 위치합니다.
(9) suffixText: 입력란에 포스트 텍스트를 설정합니다. 이 속성은 suffixStyle 속성과 함께 사용할 수 있습니다. prefixStyle 속성은 입력 상자 뒤에 텍스트 스타일을 설정하는 데 사용되며 속성 값은 TextStyle 유형입니다.
(10) counterText: 입력창의 우측 하단에 표시되는 텍스트를 설정하며, 입력된 문자의 수를 표시하는 데 자주 사용되며 이 속성은 counterStyle 속성과 함께 사용할 수 있습니다. counterStyle 속성은 설정하는 데 사용됩니다. 입력 상자의 오른쪽 하단에 있는 텍스트 스타일 해당 속성 값은 TextStyle 유형입니다.
(11) counter: 입력 상자의 오른쪽 하단에 Widget 위젯을 설정하지만 counterText와 동시에 사용할 수는 없습니다.
(12) 채워진: 채워진 입력 상자의 배경색을 설정합니다(값이 true인 경우). fllColor 속성을 사용하여 지정하십시오. 색상은 입력 상자의 배경색으로 사용됩니다. fllColor 속성은 입력 상자의 배경색을 설정하는 데 사용되며 속성 값 유형은 Color 유형입니다.

 TextField(
            maxLength: 13,
            maxLengthEnforced: false,
            maxLines: 1,
            // obscureText: true,
            enableInteractiveSelection: false,
            textCapitalization: TextCapitalization.words,
            // keyboardType:TextInputType.emailAddress// 设置输入内容时软键盘的类型
            decoration: InputDecoration(
              icon: Icon(Icons.ad_units_rounded,color: Colors.grey  ,),
              labelText: '手机号',
              labelStyle: TextStyle(color: Colors.black),
              hintText: '请输入用户手机号码',
              hintStyle: TextStyle(color: Colors.black12),
              prefixText: '086',
              prefixStyle: TextStyle(color: Colors.black),
              prefixIcon: Icon(Icons.phone,color: Colors.blue,),
              suffixText: '中国',
              suffixIcon: Icon(Icons.flag,color: Colors.grey),
              counterText: '输入13位手机号码',
              counterStyle: TextStyle(color: Colors.grey),
              // counter: Text('输入13位手机号码')
              filled: true,
              fillColor: Colors.orangeAccent


            ),
          ),

InputDecoration은 입력을 제어합니다.

상자의 바깥쪽 테두리 스타일의 공통 속성 바깥쪽 테두리
의 기본 스타일은 회색입니다.

(1) 테두리: 입력 상자의 테두리 선을 설정합니다. 기본적으로 테두리가 있는데, 입력 상자에 포커스가 없을 때 바깥쪽 테두리는 회색이고, 입력 상자에 포커스가 있으면 바깥쪽 테두리가 테마 색상입니다.
이 속성의 값은 다음과 같습니다.
border:InputBorder.none, 테두리 없이 입력 상자를 설정합니다.

테두리: OutlineInputBorder(), 입력 상자의 테두리 선 스타일

설정, 외부 테두리 스타일 설정:

    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(30))//边角为30的方框
    )

UnderlineInputBorder는 입력 상자의 하단 경계선 스타일을 설정하고,

(2) enabledBorder: 사용 가능한 상태에서 입력 상자의 경계선 색상, 모서리 라디안 등을 설정하며, 이 속성의 값은 border 속성과 동일합니다. .

enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(60)), //边角为30的方框
          borderSide: BorderSide(color: Colors.red,width:10)//设置边框线的颜色和粗细
      )

(3) FocusedBorder:
포커스 획득 시 입력 상자의 경계선, 모서리 라디안 등의 색상을 설정하며 사용 방법은 enabledBorder 속성과 동일합니다.

focusedBorder:OutlineInputBorder()

클릭 전

클릭 후 엔터

전체 코드:

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

class denglupage extends StatelessWidget {
    
    
  InputDecoration inputDecoration = InputDecoration(
      icon: Icon(
        Icons.ad_units_rounded,
        color: Colors.grey,
      ),
      labelText: '手机号',
      labelStyle: TextStyle(color: Colors.black),
      hintText: '请输入用户手机号码',
      hintStyle: TextStyle(color: Colors.black12),
      prefixText: '086',
      prefixStyle: TextStyle(color: Colors.black),
      prefixIcon: Icon(
        Icons.phone,
        color: Colors.blue,
      ),
      suffixText: '中国',
      suffixIcon: Icon(Icons.flag, color: Colors.grey),
      counterText: '输入13位手机号码',
      counterStyle: TextStyle(color: Colors.grey),
      // counter: Text('输入13位手机号码')
      filled: true, //设置填充输人框的背景色，
      // fillColor: Colors.orangeAccent
      // border: UnderlineInputBorder( )
      enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(60)), //边角为30的方框
          borderSide: BorderSide(color: Colors.red,width:10)//设置边框线的颜色和粗细
      ),
      focusedBorder:OutlineInputBorder()
  );
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('有请甄学者登录'),
          titleTextStyle: TextStyle(color: Colors.yellow),
          backgroundColor: Colors.black87,
        ),
        body: Column(children: <Widget>[
          TextField(
            maxLength: 8,
            maxLengthEnforced: false,
            maxLines: 1,
            // obscureText: true,
            enableInteractiveSelection: false,
            textCapitalization: TextCapitalization.words,
            // keyboardType:TextInputType.emailAddress// 设置输入内容时软键盘的类型
            decoration: InputDecoration(
                icon: Icon(Icons.person),
                labelText: '用户名',
                labelStyle: TextStyle(color: Colors.black),
                helperText: '用户名只能由字母和数字组成',
                helperStyle: TextStyle(color: Colors.grey),
                errorText: '用户名格式错误',
                errorStyle: TextStyle(color: Colors.red),
                hintText: '请输入用户名',
                hintStyle: TextStyle(color: Colors.black12)),
          ),
          TextField(
            maxLength: 13,
            maxLengthEnforced: false,
            maxLines: 1,
            // obscureText: true,
            enableInteractiveSelection: false,
            textCapitalization: TextCapitalization.words,
            // keyboardType:TextInputType.emailAddress// 设置输入内容时软键盘的类型
            decoration: inputDecoration,
          ),
        ]

            // TextField delegate method
            ));
    // theme:ThemeData(primaryColor: Colors.black38)));
  }
}