Flutter —— 聊天界面

最新推荐文章于 2025-10-01 12:17:08 发布

原创

最新推荐文章于 2025-10-01 12:17:08 发布 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

这篇博客介绍了如何在Flutter中创建聊天界面，包括使用_buildPopupMenuItem和PopupMenuButton，模拟网络请求并创建接口。博主利用http库进行异步数据请求，解析JSON并转换为Chat模型。通过FutureBuilder展示了如何根据异步数据动态更新UI，处理数据加载时的占位显示，并讨论了在数据量大时避免使用FutureBuilder的情况。最后，博主讲解了如何在页面切换时保持状态，并使用PageView配合bottomNavigationBar实现页面间的平滑过渡。

Flutter —— 聊天界面

首先做的事右上角的按钮，右上角要弄一个menu，那么这里可以在AppBar的actions添加Flutter封装好的控件PopupMenuButton，用一个container包着调整位置，然后用offset调整自身的位置。

actions: [
         Container(child:
         PopupMenuButton(
           itemBuilder: (BuildContext context) {
             return <PopupMenuItem<String>>[
               PopupMenuItem(child: Text("发起群聊")),
               PopupMenuItem(child: Text("发起群聊")),
               PopupMenuItem(child: Text("发起群聊")),
             ];
           },
           child: Image(
             image: AssetImage('images/圆加.png'),
             width: 25,
           ),
           offset: Offset(0,60)
         ),
         margin: EdgeInsets.only(right: 10),),
         color: Color.fromRGBO(1, 1, 1, 0.65),),
        ],

创建一个_buildPopupMenuItem来快速创建PopupMenuItem.

  Widget _buildPopupMenuItem(String imgAsset, String title) {
    return Row(
      children: [
        Image(
          image: AssetImage(imgAsset),
          width: 20,
        ),
        SizedBox(width: 20,),
        Text(title,style: TextStyle(color:Colors.white),),
      ],
    );
  }

在PopupMenuButton中使用。

    child: PopupMenuButton(
                itemBuilder: (BuildContext context) {
                  return <PopupMenuItem<String>>[
                    PopupMenuItem(
                        child: _buildPopupMenuItem('images/发起群聊.png', '发起群聊')),
                    PopupMenuItem(
                      child: _buildPopupMenuItem('images/添加朋友.png', '添加朋友'),
                    ),
                    PopupMenuItem(
                      child: _buildPopupMenuItem('images/扫一扫1.png', '扫一扫'),
                    ),
                    PopupMenuItem(
                        child: _buildPopupMenuItem('images/收付款.png', '/收付款')),
                  ];
                },

接下来要模拟网络请求。去http://rap2.taobao.org/创建一个仓库。
在这里插入图片描述
之后点击新建接口。

输入相应的内容