flutter实战项目，教你使用flutter打造仿微信app页面！

程序员文章站 2022-06-01 17:45:57

...

flutter_wechat

源码地址:https://github.com/ding-zou/flutter-wechat

????A flutter app which clones wechat！这是一个仿照微信样式基于flutter实现的app，还在继续完善中，欢迎提意见

包含了flutter中基本所有的组件，适合以此项目进行flutter学习。

页面展示

flutter实战项目，教你使用flutter打造仿微信app页面！

主要功能实现QA

1. 通讯录页右侧字母表

Q：如何实现列表滚动而字母表不滚动

A：因为通讯录列表是可以滚动的，所以我们想到使用Stack来把字符表放在固定位置而不会因为ListView滑动而滑动。

Q：如何控制字母表滚到对应位置触发外部轮廓圆？

A：首先我们使用的是BoxDecoration实现的外部轮廓，然后我们需要一个标志来控制其轮廓的显示，其实我们通过控制轮廓的颜色就好了，我们定义了一个颜色，滚动到时通过setState来改变颜色，就可以实现滚动是变化。

Q：如何确定对应字母的对应ListView的位置？

A：我们知道构建每一个ListTile时它的高度都是一样的，我们就可以通过计算来得到每个字母在ListView中的位置。我们模拟接收到数据，我们用一个map保存对应字母对应所在的位置，比如字母a所在为110，然后a有10个通讯录Item，那么b的位置就是a的位置加上10*每个Item的高度。此外我们每个字母还有一行显示，所以我们还要加上这行的高度。

2. 搜索栏

Q：怎么通过TextField实现自定义搜索栏？

A：我们通过设置TextField的装饰属性decoration，传入一个InputDecoration控件，里面我们可以设置很多属性来自定义显示。还不能满足你的情况的话可以自己在外层进行包装。


decoration: InputDecoration(

  icon: Container(

    padding: EdgeInsets.only(left: 10),

    child: Icon(Icons.search,

                size: 23, color: Colors.grey[400])),

  contentPadding: EdgeInsets.fromLTRB(0, 0, 0, 13),

  border: InputBorder.none,

  hintText: widget.hint,

  hintStyle: TextStyle(

    fontSize: 15,

  )),

3.主页右上角点击按钮弹窗

Q：如何实现这样的弹窗？

A：我们可以通过官方提供的PopupMenuButton来实现，可以通过以下这种方式构建


PopupMenuButton(

  offset: Offset(0,70),

  color: Color(0xff4c4c4c),

  itemBuilder: (BuildContext context) {

    return <PopupMenuItem<int>>[

      /// 设置你的弹窗Item数组

      PopupMenuItem(

        child: _popupItem(0xe69e,0),

        value: 0,

      ),

    ];

  },

  /// 设置按钮的Icon 是一个Widget类型的

  icon: Container(

    decoration: BoxDecoration(

      borderRadius: BorderRadius.circular(10),

      border: Border.fromBorderSide(BorderSide(

        color: Colors.black87,

        style: BorderStyle.solid))),

    child: Icon(

      Icons.add,

      size: 19,

      color: Colors.black87,

    ),

  ))

Q：如何设置弹窗出现的位置？它遮住了其他控件怎么办？

A：我们可以通过它的offset属性传入一个Offset偏移量就好了

4.图片红点以及导航栏红点

Q：怎么实现红点显示在图片上？

A：我们可以通过万能的Stack来实现，我们可以用Container包裹，设置一个较大的宽和高，然后里面放上图片，再通过Positioned把小红点放在右上角

参见下面实现方式：


Container(

  height: 43,

  width: 43,

  child: Stack(children: <Widget>[

    Positioned(

      left: 0,

      bottom: 0,

      child: ClipRRect(

        borderRadius: BorderRadius.circular(4),

        child: Image.network(

          imgUrl

          fit: BoxFit.cover,

          height: 40,

          width: 40,

        ))),

    Positioned(

      right: 0,

      top: 0,

      child: Container(

        decoration: BoxDecoration(

          borderRadius: BorderRadius.circular(4),

          border: Border.fromBorderSide(

            BorderSide(width: 1, color: Colors.red[600]))),

        child: Container(

          color: Colors.red[600],

          height: 6,

          width: 6,

        ),

      ),

    )

  ]),

)

Q：flutter提供的*BottomNavigationBar*怎么实现红点？

A：你可以使用BottomNavigationBar来使用上述方式构建红点，分别设置icon和activeIcon

DONE

首页
通讯录页(通讯录页字母表跳转)
发现页
我的页面
搜索页
聊天页

TODO

朋友圈页面
我的资料卡片页
设置页
支付页
多语言

源码地址:https://github.com/ding-zou/flutter-wechat