Flutter輸入框全面解析

一、Flutter輸入框問題

在實際開發中，我們難免會遇到各種各樣的輸入框問題，比如輸入框無法聚焦、輸入框限制輸入範圍、輸入框樣式問題等等。在Flutter中，我們可以使用TextField控制項來實現輸入框的功能。下面我們將逐一闡述各種問題的解決方法。

二、Flutter輸入框只能輸入小數和整數

當我們需要輸入小數和整數時，可以通過設置inputFormatters屬性來限制輸入的內容。例如，我們只允許輸入數字和小數點:

TextField(
   inputFormatters: [
       WhitelistingTextInputFormatter(RegExp("[0-9.]"))
   ],
)

三、Flutter輸入框失去焦點事件

當輸入框失去焦點時，我們需要獲取輸入框的輸入內容並執行相應的操作。可以通過onChanged和onSubmitted回調事件來實現。

TextField(
   onChanged: (value) {
       //輸入框內容發生變化時觸發
   },
   onSubmitted: (value) {
       //輸入框內容提交時觸發
   },
)

四、Flutter輸入框彈窗

輸入框彈窗一般用於選擇日期、時間、城市等信息。可以通過調用showDatePicker、showTimePicker等方法來實現。

showDatePicker(
   context: context,
   initialDate: DateTime.now(),
   firstDate: DateTime(2000),
   lastDate: DateTime(2100)
).then((value) {
   //選擇日期後的操作
});

五、Flutter輸入框美化

我們可以通過設置TextStyle、decoration、border等屬性來美化輸入框。比如下面是一個圓角、帶邊框和陰影的輸入框：

TextField(
  decoration: InputDecoration(
      border: OutlineInputBorder(
         borderRadius: BorderRadius.circular(10),
         borderSide: BorderSide.none
      ),
      filled: true,
      fillColor: Colors.grey[200],
      hintText: '請輸入...',
      contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
      suffixIcon: Icon(Icons.search),
  ),
)

六、Flutter輸入框長按

長按輸入框一般用於展示更多操作，比如複製、粘貼、全選等。可以通過調用showMenu方法來實現。例如：

TextField(
  onTap: (){
     FocusScope.of(context).requestFocus(FocusNode());
     showMenu(
        context: context,
        position: RelativeRect.fromLTRB(0.0, 0.0, 0.0, 0.0),
        items: [
           PopupMenuItem(child: Text('複製')),
           PopupMenuItem(child: Text('粘貼')),
           PopupMenuItem(child: Text('全選')),
        ]
     );
  },
)

七、Flutter輸入框陰影

我們可以通過設置陰影相關的屬性來給輸入框添加陰影效果，比如下面是一個帶陰影的輸入框：

TextField(
   decoration: InputDecoration(
      border: OutlineInputBorder(
         borderSide: BorderSide.none,
         borderRadius: BorderRadius.circular(5)
      ),
      filled: true,
      fillColor: Colors.grey[200],
      hintText: '請輸入...',
      contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
      suffixIcon: Icon(Icons.search),
      enabledBorder: OutlineInputBorder(
         borderSide: BorderSide(
            color: Colors.transparent,
         ),
         borderRadius: BorderRadius.circular(5),
      ),
      focusedBorder: OutlineInputBorder(
         borderSide: BorderSide(
            color: Colors.blue,
            width: 1
         ),
          borderRadius: BorderRadius.circular(5),
          ),
      boxShadow: [
         BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 2,
            blurRadius: 5,
            offset: Offset(0, 2), // changes position of shadow
         ),
       ],
   ),
)

八、Flutter輸入框退格

我們可以通過設置onEditingComplete回調事件來監聽回退鍵的點擊操作。例如：

TextField(
   onEditingComplete: () {
       //退格事件回調
   },
)

九、Flutter輸入框文本居中

我們可以通過設置textAlign屬性來將輸入框的文本居中。例如：

TextField(
   textAlign: TextAlign.center,
)

十、Flutter輸入框彈窗控制項選取

除了選擇日期、時間、城市等信息的彈窗外，我們還可以通過其他的控制項來實現更多的功能。例如，我們可以通過showModalBottomSheet方法來打開一個底部彈窗，該彈窗可以實現複雜的選擇功能。

showModalBottomSheet(
   context: context,
   builder: (BuildContext context) {
      return Container(
         height: 200,
         child: ListView.builder(
            itemCount: 30,
            itemBuilder: (context, index) {
               return ListTile(
                  title: Text('選項 $index'),
                  onTap: () {
                     //選項點擊事件
                  },
               );
            },
         ),
      );
   },
);

總結

通過本文的介紹，我們可以看到在Flutter中，我們可以通過設置多種屬性和調用多種方法來解決輸入框相關的問題。希望本文對您開發中的輸入框問題有所幫助。