在 Flutter 應用程序中隱藏/關閉 ListView 滾動上的鍵盤

Question

我在 Flutter 應用中有聊天窗口。 消息在ListView小部件內顯示為小部件，我還有附加到窗口底部的消息輸入小部件。

我想要

1. 滾動ListView時隱藏鍵盤
2. 從InputWidget添加新消息時滾動到最后一條消息

代碼：

class _MessagesPageState extends State<MessagesPage> {
  final ScrollController listScrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    ....
    body: Stack(
        children: [
          ListView.builder(
              controller: listScrollController
              ....
          ),
          InputWidget()]
    );
}

class InputWidget extends StatelessWidget {

  final TextEditingController _textEditingController = TextEditingController();

....
Row (
  children: [
    TextField(
     controller: _textEditingController
    ), 
    IconButton(icon: ...., onPressed: (){})
  ]
 )}

Answer 1

要在列表視圖滾動時隱藏鍵盤，您只需向其添加keyboardDismissBehavior 。 例子

ListView(
 keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
 children: [],
)

Answer 2

至於你的第 1 點問題：

您可以為listScrollController創建一個偵聽器函數， listScrollController包含對匿名FocusNode的調用（想法取自此高度投票的答案），並且當發生任何滾動事件時，焦點將從您的TextField獲取，並且鍵盤將被解除：

 class _MessagesPageState extends State<MessagesPage> {

 final ScrollController listScrollController = ScrollController();

 @override
 void initState() {
   listScrollController.addListener(_scrollListener);
   super.initState();
 }

 _scrollListener() {
   FocusScope.of(context).requestFocus(FocusNode());
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
   ....
   body: Stack(
    children: [
      ListView.builder(
          controller: listScrollController
          ....
      ),
      InputWidget(controller: listScrollController)]
   );
}

第 2 點：

您會注意到我修改了InputWidget以將ScrollController作為參數，因此您可以將ListView控制器傳遞給它。 而當IconButton被按下時， listScrollController會根據您的需要跳轉到最后。

 class InputWidget extends StatelessWidget {

 InputWidget({Key key,this.controller}) : super(key: key);

 final ScrollController controller ;

 final TextEditingController _textEditingController = TextEditingController();

 ....
 Row (
  children: [
    TextField(
      controller: _textEditingController
    ), 
    IconButton(icon: ...., onPressed: (){
      controller.jumpTo(controller.position.maxScrollExtent);
    })
  ]
 )}

Answer 3

很簡單..按照這些步驟..

1. 將類更改為StatefullWidget
2. 創建final ScrollController listScrollController = ScrollController();

3. ListView 應該是這樣的：

    ListView.builder( controller: listScrollController, reverse: true,

4. 如果您像這樣使用 firebase 更改順序：

   .orderBy('timestamp', descending: true)

5. 在您的發送按鈕中添加此代碼

listScrollController.animateTo(0.0,duration: Duration(milliseconds: 300), curve: Curves.easeOut);

自動向上滾動你的 textField，在Stack添加你的textField和ListView