Flutter开发遇到的问题。

问题一：CustomScrollView

事情是这样，我在使用ListView的时候想给他添加一个HeadView。想到了CustomScrollView，组件。 搭建好页面之后，使用CustomScrollView吧ListView和SearchBar拼接起来。发现报错了。一顿查资料，发现CustomScrollView里面只能放Sliver家族中的成员，Sliver家族成员列举部分如下：

1. SliverAppbar
2. SliverList
3. SliverGrid
4. SliverToBoxAdapter
5. SliverFillRemaining

使用SliverToBoxAdapter包裹headView。 使用SliverList实现ListView功能（因为他不能包裹ListView）。 特此记录一下

SliverPersistentHeader

SliverPersistentHeader(
  pinned:true,
  floating: true,
  delegate: _MySliverPersistentHeaderDelegate(
    Text('测试数据'),
  ),
),

悬浮效果实现 _MySliverPersistentHeaderDelegate的定义在这

class _MySliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double _minExtent = 0;
  final double _maxExtent = 60;

  _MySliverPersistentHeaderDelegate(this.child);
  Widget child;
  @override
  Widget build(BuildContext context, double shrinkOffset,
      bool overlapsContent) {
    //创建child子组件
    //shrinkOffset：child偏移值minExtent~maxExtent
    //overlapsContent：SliverPersistentHeader覆盖其他子组件返回true，否则返回false
    print('shrinkOffset = $shrinkOffset overlapsContent = $overlapsContent');
    return Container(
      alignment: Alignment.center,
      child: this.child,
    );
  }
  //SliverPersistentHeader最大高度
  @override
  double get maxExtent => _maxExtent;
  //SliverPersistentHeader最小高度
  @override
  double get minExtent => _minExtent;
  @override
  bool shouldRebuild(covariant _MySliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

问题二：错误Invalid constant value

title: const Text(
  '微信',
  style: TextStyle(
    color: WXDarkAndLightConfig.wechatTitleColor,
  ),
),

然后抛出错误如下：

Invalid constant value.

大概意思是WXDarkAndLightConfig.wechatTitleColor是可变的，而Text标记为const，冲突了。 解决方法：去掉const关键字就好。

问题三：自定义Icon代码

我想要自定义tabbar的图标，也就是选中和非选择使用不同的Icon，而不是简单的改变颜色。发现Flutter中不能像iOS一样可以直接设置。

首先我自己想到的方法时在点击图标的时候可以得知当前的点击的下标，再点击某个下标时动态更新四个Icon。

onTap: (int index){
  setState(() {
    _selectIndex = index;
  });
},

期间发现一个小Tips 例如我之前引入头文件是这样引用的

import 'package:wechat_flutter_practice/constant/AssetsPathManage.dart';

package:wechat_flutter_practice是项目固定的路径，可以使用 ".." 代替，如下：

import '../constant/AssetsPathManage.dart';

代码看起来就简洁很多。而且一眼能看出引用的哪些插件是自己的那些是第三方的。

自定义Icon代码实践：

1.首先创建一个数组

外层List有四个List（对象），代表四个图标。 内层List(对象)里面有两个图标，下标0代表未选中状态图标。下标1未选中状态图标，

2.然后创建一个函数：

函数有两个参数，index代表是第几个图标，isSelect代码是否是选中状态。

获取选中状态：

 BottomNavigationBar(
  onTap: (int index){
    setState(() {
      _selectIndex = index;
    });
  },
}

3.使用函数。

BottomNavigationBarItem(
    icon: getTabbarIcon(0, _selectIndex == 0),
    label: S.of(context).tabbar_item_wechat),

搞定了。但是代码都写在了这个文件里面显得有些臃肿，可以吧数组数据以及函数体抽离到主题色适配类里面。 这样就可以；

WXDarkAndLightConfig.getTabbarIcon(0, _selectIndex == 0)

问题4：使用CustomScrollView导致列表展示不全

项目中因为需要添加类似于iOS中的HeadView组件，所以使用了CustomScrollView，

具体就是这样，导致List展示不全，最后一个聊天内容展示不全，如下图：

这个高度应该就是顶部搜索框的高度。

未完待续