Flutter 實現TextField的placeholder效果CupertinoTextField( placeholder: '手機賬號',

TextField組件有一個decoration屬性改屬性值爲hintText即可

 

hintText 在輸入時會消失,

labelText在輸入時則會縮小到TextField的左上角

icon屬性則類似iOS中的leftView,區別在於下方輸入框長度

也可以設置hintStyle 屬性,設置placeHoleder的顏色,大小,字體樣式等

 

iOS風格的輸入框設置:

CupertinoTextField(
                    placeholder: '手機賬號',
                    // cursorRadius: ,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5.0),
                      border: Border.all(
                        color: Colors.blue,
                        style: BorderStyle.solid,
                        width: 2,
                      )
                    ),
                  ),