文本字段焦点触发 UI 的重建

Question

当我设置 Textfield autofocus:false 时，它不会刷新页面，但是当我点击 TextField 时，键盘会显示然后主页面会重建，这会导致延迟。

这个问题已经存在将近一周了。我可以找到与文本字段重建 UI 相关的问题，但该解决方案不适用于我的。

当按钮被点击时，主页包含此功能

void addCommentModal() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          padding:
              EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: AddCommentModal(
            onPost: (String text) {
              // APIServices.commentPost(context, i.toString(), text);
              Navigator.pop(context);
            },
          ),
        );
      },
    );
  }

添加评论模式

class AddCommentModal extends StatefulWidget {
  final ValueChanged<String> onPost;

  AddCommentModal({@required this.onPost});

  @override
  _AddCommentModalState createState() => _AddCommentModalState();
}

class _AddCommentModalState extends State<AddCommentModal> {

  final commentController = TextEditingController();
  bool _canPost = false;
  String defaultProfilePhoto = "";
  @override
  void initState() {
    defaultProfilePhoto = Constants.userFirstName[0].toUpperCase();
    super.initState();
  }

  @override
  void dispose() {
    commentController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    print("PHOTO: ${Constants.userProfilePhoto}");
    return Container(
        padding: EdgeInsets.all(10),
        child: Row(
          children: <Widget>[
            Container(
              width: 50,
              height: 50,
              child: ClipRRect(
                  borderRadius: new BorderRadius.circular(50),
                  child: Constants.userProfilePhoto == null
                      ? Container(
                          color: Color(colorPrimary),
                          alignment: Alignment.center,
                          child: Text(
                            defaultProfilePhoto,
                            style: TextStyle(
                                color: Color(colorText), fontSize: 20),
                          ),
                        )
                      : Image.network(
                          APIServices.httpDomain + Constants.userProfilePhoto,
                          fit: BoxFit.cover,
                        )),
            ),
            Expanded(
                child: Container(
              margin: EdgeInsets.only(
                left: 10,
              ),
              child: TextField(
                controller: commentController,
                autofocus: true,
                decoration: new InputDecoration(
                  suffixIcon: IconButton(
                      onPressed: () => widget.onPost(commentController.text),
                      icon: Icon(
                        FontAwesomeIcons.paperPlane,
                        size: 15,
                        color: Theme.of(context).primaryColor,
                      )),
                  contentPadding: EdgeInsets.all(10),
                  hintText: "Add a comment ...",
                  fillColor: Colors.white,
                  border: new OutlineInputBorder(
                    borderRadius: new BorderRadius.circular(20.0),
                  ),
                ),
                keyboardType: TextInputType.text,
                style: new TextStyle(fontFamily: "Poppins", fontSize: 15),
              ),
            ))
          ],
        ));
  }
}

Answer 1

遇到同样的问题，尝试了几个小时：

如果您的屏幕依赖于 MediaQuery 或至少有一个小部件 depenig on MediaQuery，键盘弹出窗口会改变你的大小 屏幕，触发 mediaQuery 并导致重建......在这种情况下 避免使用 mediaQuery，而是使用 (sizer 包）https://pub.dev/packages/sizer

替换了与 mediaQuery 相关的所有内容，现在可以正常工作了。

Answer 2

这是由 Flutter 的 SDK 上未优化的代码引起的：https://github.com/flutter/flutter/issues/37878。

该修复程序是最近合并的，位于“主”频道。

考虑切换到该频道，使用flutter channel master。