Flutterの基本コンポーネントのTextFieldコンポーネント入力ボックスの装飾プロパティの簡単な理解

装飾

装飾プロパティは、入力ボックスの装飾を設定するために使用されます。プロパティ値のタイプはInputDecorationです。入力ボックスの外観とプロンプトメッセージのスタイルを制御します。

InputDecorationは、入力ボックスのプロンプト情報スタイルの一般的なプロパティを制御します

（1）アイコン：
入力ボックスの左側に表示するアイコンを設定します。
（2）labelText：入力ボックスの説明情報を設定します。入力ボックスにフォーカスが入ると、デフォルトで一番上に浮きます。
（3）helperText：入力ボックスの下にある入力ボックスの補助情報を設定します。
（4）errorText：入力ボックスの内容が間違って入力された場合のエラーメッセージを設定します。
（5）hintText：入力ボックスにプロンプ​​ト情報を設定します。この属性は、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：入力ボックスにフロントアイコンを設定します。使用方法はアイコン属性と同じですが、アイコンはアイコン属性で設定したアイコンの右側にあります。
（7）prefixText：入力ボックスにプリテキストを設定します。このプロパティはprefixStyleプロパティと組み合わせて使用​​できます。prefixStyleプロパティは、入力ボックスにプリテキストスタイルを設定するために使用されます。そのプロパティ値は次のとおりです。 TextStyle。
（8）suffixlcon：入力ボックスに背面アイコンを設定します。使用方法はicon属性と同じですが、アイコンは入力ボックスの右側にあります。
（9）suffixText：入力ボックスに投稿テキストを設定します。このプロパティはsuffixStyleプロパティと組み合わせて使用​​できます。prefixStyleプロパティは、入力ボックスの背後にあるテキストスタイルを設定するために使用されます。プロパティ値はTextStyleタイプです。
（10）counterText：入力ボックスの右下に表示されるテキストを設定します。入力された文字数を表示するためによく使用されます。このプロパティは、counterStyleプロパティと組み合わせて使用​​できます。counterStyleプロパティは、入力ボックスの右下にあるテキストスタイル。そのプロパティ値タイプはTextStyleです。
（11）counter：入力ボックスの右下にウィジェットウィジェットを設定しますが、counterTextと同時に使用することはできません。
（12）filled：入力ボックスの値が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：入力ボックスの境界線を設定します。デフォルトでは境界線があります。入力ボックスにフォーカスがない場合、外側の境界線は灰色になります。入力ボックスにフォーカスがある場合、外側の境界線はテーマの色になります。
このプロパティの値は次のようになります
。border：InputBorder.none、境界線なしで入力ボックスを設定します。

border：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()

クリックする前

クリックした後Enter

完全なコード：

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)));
  }
}