Question

我在Flutter应用中有聊天窗口。消息在ListView小部件内以小部件的形式显示，并且窗口底部还附有用于消息输入的小部件。

我想

滚动ListView时隐藏键盘
从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

关于您问题的第1点：

您可以为listScrollController创建一个侦听器函数，其中包含对匿名FocusNode的调用（该想法摘自投票率很高的answer），并且在发生任何滚动事件时，焦点将变为从您的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 2

很简单。按照这些步骤进行操作。

将类更改为StatefullWidget
创建final ScrollController listScrollController = ScrollController();

ListView应该是这样的：

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

如果您使用Firebase更改命令，例如：

.orderBy('timestamp', descending: true)
在“发送”按钮中添加此代码

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

自动向上滚动文本字段，在textField内添加ListView和Stack

在Flutter应用中的ListView滚动上隐藏/关闭键盘

2 个答案: