Flutter：關閉軟鍵盤后如何保持TextField值

Question

有一個帶有 Bottom Modal Sheet 的簡單結構，其中包含一個用於將文本添加到列表中的輸入 TextField 和一個用於提交值的按鈕。

當文本字段獲得焦點時，它會自動打開覆蓋提交按鈕的軟鍵盤。 當我關閉鍵盤以按下按鈕時，文本字段中的值仍然可見，但發送的值為 null。如果我在不關閉鍵盤的情況下按下按鈕，則會正確發送該值。

問題是：我怎樣才能關閉鍵盤並在按下提交按鈕后仍然能夠發送鍵入的值？

這是代碼：

1) 在主屏幕上，浮動操作按鈕顯示模態底頁。

return Scaffold(
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        showModalBottomSheet(
            context: context,
            builder: (context) => AddTaskScreen(),               
      },

2) 在 AddTaskScreen class 上，有一個 Column，其中包含容器內的模態底部表單的內容。

Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(
            'Add your next Task',
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.lightBlueAccent,
              fontSize: 20,
              fontWeight: FontWeight.w400,
            ),
          ),
          TextField(
            textAlign: TextAlign.center,
            autofocus: true,
            onChanged: (value) {
              newTaskTitle = value;
            },
          ),
          FlatButton(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(
                Radius.circular(10),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                'ADD',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 25,
                ),
              ),
            ),
            color: Colors.lightBlueAccent,
            onPressed: () {
              print(newTaskTitle);
            },
          ),
        ],
      ),
    ),

在這個簡化版本中，當按下按鈕時，來自 TextField 的值會打印在控制台中。 如果我在不隱藏鍵盤的情況下按下按鈕，它就可以正常工作； 如果我隱藏鍵盤，它會傳遞一個 null 值。

在此先感謝您的幫助。

Answer 1

好的，最簡單的方法是向子 class 提供 TextEditingController。

因此，對於您的情況，您可以首先在父 Class 中創建一個 TextEditingController，然后將其傳遞給子 class。 並在子 class 內的 TextField 中設置 controller：您已通過的 controller

Parent Class.....
//// other codes ////
TextEditingController textEditingController = TextEditingController();
return Scafold{
  FloatingActionButton(
  onPressed: () {
    showModalBottomSheet(
        context: context,
        builder: (context) => AddTaskScreen(textEditingController),               
  },
};

和中子class

class ChildClass extends StatelessWidget(
final TextEditingController textEditingController;
ChildClass({this.textEditingController});
///then inside build method///
Container(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text(
        'Add your next Task',
        textAlign: TextAlign.center,
        style: TextStyle(
          color: Colors.lightBlueAccent,
          fontSize: 20,
          fontWeight: FontWeight.w400,
        ),
      ),
      TextField(
        textAlign: TextAlign.center,
        autofocus: true,
        controller: textEditingController, /// here add the controller
        onChanged: (value) {
          newTaskTitle = value;
        },
      ),
      FlatButton(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(10),
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            'ADD',
            style: TextStyle(
              color: Colors.white,
              fontSize: 25,
            ),
          ),
        ),
        color: Colors.lightBlueAccent,
        onPressed: () {
          print(newTaskTitle);
        },
      ),
    ],
  ),
),

現在，您只需從這兩個類之間的任何位置調用 textEditingController.value.text 即可訪問 TextField 中寫入的內容。

Answer 2

我遇到了同樣的問題，我通過簡單地將 class 轉換為擴展StatefullWidget而不是StatelessWidget來解決它。

在您的情況下，將 class AddTaskScreen()轉換為擴展StatefullWidget 。

Answer 3

只需移動文本控制器的聲明就可以為我工作。

....    
class _AddPlaceScreenState extends State<AddPlaceScreen> {
      final controllerTittlePlace = TextEditingController();
      final controllerDescriptionPlace = TextEditingController();
      final controllerLocationPlace = TextEditingController();
....