Element 系列組件之 ETextField

介紹

「ETextField」?組件是?「Flutter Element」?組件系列中的輸入組件，封裝了系統(tǒng)的?「TextField」?組件，封裝了一些常用的功能，并解決了兩個常見的錯誤，詳見：

• Flutter 中 TextField 組件必然會遇到的問題
  

引入

1. 在?「pubspec.yaml」?中依賴

   element_ui:?^0.0.1
   

2. import

   import?'package:element_ui/widgets.dart';
   

基礎用法

「ETextField」?默認顯示圓角邊框，

ETextField()

「placeholder」：設置提示文字。

ETextField(
??placeholder:?'please?input',
)

「value」：設置初始值。

ETextField(
??value:?'Flutter?Element',
)

「textStyle」: 設置字體樣式。

ETextField(
??value:?'Flutter?Element',
??textStyle:?TextStyle(color:?Colors.blue),
)

「placeholderTextStyle」：設置提示文字樣式。

ETextField(
??placeholder:?'please?input',
??placeholderTextStyle:?TextStyle(color:?Colors.red),
)

「clear」：是否顯示清空按鈕，默認false。

ETextField(
??placeholder:?'please?input',
??clear:?true,
)

「obscureText」：密碼框

ETextField(
??obscureText:?true,
)

「showPassword」：是否顯示密碼圖標，默認false。

ETextField(
??obscureText:?true,
??showPassword:?true,
)

「height」：設置高度，設置不同的高度，文字都會居中，如果需要多行文本，查看?「maxLines」。

ETextField(
??height:?30,
??value:?'Flutter?Element',
),

ETextField(
??height:?140,
??value:?'Flutter?Element',
)

「maxLines」?：多行文本域

ETextField(
??height:?200,
??placeholder:?'please?input',
??maxLines:?10,
)

「showWordLimit」:顯示字數(shù)統(tǒng)計

ETextField(
??showWordLimit:?true,
??maxLength:?10,
),

ETextField(
??height:?200,
??maxLines:?10,
??showWordLimit:?true,
??maxLength:?100,
),

「limitBuilder」：自定義字數(shù)統(tǒng)計

ETextField(
??height:?200,
??maxLines:?10,
??showWordLimit:?true,
??maxLength:?100,
??limitBuilder:?(context,?length,?maxLength)?{
????return?Row(
??????children:?[
????????Text(
??????????'$length',
??????????style:?const?TextStyle(color:?Colors.red),
????????),
????????Text('/$maxLength'),
??????],
????);
??},
)

「style」：類型為?「ETextFieldStyle」。

• 「fontColor」：字體顏色，textStyle = null 時，使用此屬性。
• 「backgroundColor」：背景顏色。
• 「placeholderColor」：提示文案顏色，placeholderTextStyle = null時，使用此屬性。
• 「borderColor」：線框顏色。
• 「focusBorderColor」：獲取焦點時線框顏色。
• 「clearColor」：clear 圖標顏色。
• 「borderRadius」：線框圓角。

ETextField(
??value:?'Flutter?Element',
??placeholder:?'please?input',
??style:?ETextFieldStyle(
????fontColor:?Colors.red,
????backgroundColor:?Colors.yellow,
????placeholderColor:?Colors.red.withOpacity(.5),
????borderColor:?Colors.green,
????focusBorderColor:?Colors.blue,
????borderRadius:?BorderRadius.circular(100),
??),
)

suffix、prefix、maxLines、keyboardType、textInputAction、textCapitalization、textAlign、textAlignVertical、onChanged、onSubmitted、inputFormatters 這些屬性和原生屬性一樣，具體用法可參考：http://laomengit.com/guide/widgets/TextField.html