简体   繁体   English

Flutter state 出现键盘时重建

[英]Flutter state rebuild when keyboard appears

Hello Everyone!大家好! I am using Modal BottomSheet for view comments.我正在使用 Modal BottomSheet 来查看评论。 When I click TextField (Comment Page) all widgets rebuilding also parents.当我单击 TextField (评论页面)时,所有重建的小部件也都是父级。 Why all Flutter rebuilding all widgets?为什么所有 Flutter 都重建所有小部件? And why also parents widgets rebuilding.以及为什么还要重建父母的小部件。 I know when keyboard appears or rotation changed eg.我知道键盘何时出现或旋转发生变化,例如。 both StatefulWidget and StateLessWidget rebuilded. StatefulWidget 和 StateLessWidget 都重建了。 But I can't do something in this situation.但是在这种情况下我什么也做不了。 Please help me请帮我

Here CommentPage.这里是评论页。

class CommentPage extends StatelessWidget {final String activityname;
final String postid;
final String usernameuid;
const CommentPage(
  {Key key,
  @required this.activityname,
  @required this.postid,
  @required this.usernameuid,
  }): super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
  child: Container(
    height: MediaQuery.of(context).size.height * 0.8,
    child: Scaffold(
        resizeToAvoidBottomInset: false,
        resizeToAvoidBottomPadding: false,
        appBar: AppBar(
          title: Text('Coments'),
          centerTitle: true,
        ),
        body: Container(
          height:MediaQuery.of(context).size.height * 0.8,
          width: MediaQuery.of(context).size.width,
          child: ChangeNotifierProvider(
              create: (context) => CommentLikeController(),
              builder: (context, child) => FutureBuilder<List<Comment>>(
                  future: Provider.of<CommentLikeController>(context,
                          listen: false)
                      .initial(),
                  builder: (context, snapshot) {
                    if (snapshot.hasData)
                      return Stack(children: [
                        Positioned(
                          bottom: 50,
                          child: Container(
                            height:
                                MediaQuery.of(context).size.height * 0.8 -
                                    105,
                            width: MediaQuery.of(context).size.width,
                            child: AnimatedList(
                              shrinkWrap: true,
                              reverse: true,
                              key: Provider.of<CommentLikeController>(
                                      context)
                                  .listkey,
                              initialItemCount: snapshot.data.length,

                              itemBuilder: (context, index, animation) {
                                return ListItem(
                                  index: index,
                                  postid: postid,
                                  activityname: activityname,
                                  usernameuid: usernameuid,
                                );
                              },
                            ),
                          ),
                        ),
                        Positioned(
                            bottom: 0,
                            right: 0,
                            child: IconButton(
                                icon: Icon(Icons.add),
                                onPressed: () {
                                  Provider.of<CommentLikeController>(
                                          context,
                                          listen: false)
                                      .add();
                                })),
                        Positioned(
                            bottom: 0,
                            left: 0,
                            child: Container(
                                height: 50,
                                width:
                                    MediaQuery.of(context).size.width - 50,
                                child: TextField()))
                      ]);
                    else
                      return LinearProgressIndicator();
                  })),
        )),
  ),
);
}
}    

Parents CommentPage家长评论页

class PageviewItem extends StatelessWidget {
final DBcontroller value;
final int index;
final String activityname;
final String username;
const PageviewItem(
  {Key key,
  @required this.value,
  @required this.index,
  @required this.activityname,
  @required this.username})
  : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
  child: Stack(
    children: [
      Container(
        child: value.posts[index].urln.contains('.mp4')
            ? VideoItem(value: value, index: index)
            : PhotoItem(value: value, index: index),
      ),
      UserInfo(value: value, index: index),
      Positioned(
          bottom: 5,
          left: 5,
          child: GestureDetector(
            onTap: () {
              showpopup(context);
            }, //show pop up
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.blue[400].withOpacity(0.3),
                  borderRadius: BorderRadius.all(Radius.circular(5))),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: RichText(text: TextSpan(text: 'Comment')),
              ),
            ),
          )),
      Header(activityname: activityname),
    ],
  ),
);
}
showpopup(context) {
return showModalBottomSheet(
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10), topRight: Radius.circular(10))),
  isScrollControlled: true,
  context: context,
  builder: (context1) {
    return CommentPage(
      activityname: activityname,
      postid: value.posts[index].from_uid,
      usernameuid: username,
    );
  },
);
}
}    

Note I am also have PageviewItem parents cLass.注意我也有 PageviewItem 父母 cLass。 And each one rebuilded when click TextField(keyboard appears )并在单击 TextField(出现键盘)时重建每个

I'm not good at explaining but maybe I can give an example我不擅长解释,但也许我可以举个例子

class _CommentPageState extends State<CommentPage> {

  late Future<QuerySnapshoot> commentStream; //late initialization for future comment

  @ovveride
  void initState(){
    commentStream = FirebaseFirestore.instance.collection('forumchat').snapshot //add this on initstate
  } //first initial when commentpage loaded

  Widget build(BuildContext context) {
      FutureBuilder(
         future: commentStream, //add the initialization here
         ....//
  }
}

so future comments must be initialized when the page is first opened, then when the keyboard appears, the build will not rebuild because it has already been initiated.所以未来的评论必须在第一次打开页面时初始化,然后当键盘出现时,构建不会重建,因为它已经启动了。

i hope this helping you, im very bad at explanation lol;D我希望这对你有帮助,我很不擅长解释哈哈;D

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM