flutter - 文本字段焦点触发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);
            },
          ),
        );
      },
    );
  }

AddCommentModal

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

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

该修补程序是最近合并的，位于“主” channel 上。

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