Flutter自定义AppBar&自定义解析单标签HTML富文本

Flutter自定义AppBar&自定义解析单标签HTML富文本

初学Flutter，为了完成一个带有搜索栏、TabBar以及多个图标按钮的布局可以说是绞尽脑汁。原生的AppBar虽然拥有bottom属性，常用的方法也是配合TabBar一起使用，但是并没有能修改顶部的对应的属性，只能设置一个标题栏而已。对于flexibleSpace这个属性，是指处于AppBar和bottom之间的一个和AppBar等高的控件，大概关系是这样的：
而为了达到这种效果：

显然是不太合适的，除非能把AppBar的title替换掉。出于种种原因，还是下定决心自定义一个自己的AppBar，无非就是跟源码照猫画虎，改改属性布局嘛

大概分解一下这个AppBar，有这么几部分，首先是一个一列两行的结构，第一行分为两列，左侧是一个按钮，图标也可以，反正也是随时都可以添加手势识别，右侧是一个TextField，在TextField的右侧覆盖了一个图标（按钮），反正我的第一反应是TextField和右侧图标是个Stack布局，这样实现起来应该也比较容易。

第二行就比较简单了，可以直接用TabBar。那来看看代码。

class MyAppBarShow extends StatefulWidget implements PreferredSizeWidget{
   

  //tabbar的controller，应与TabBarView的是同一个保证同时滑动
  final TabController tabController;
  //tabbar标题数据
  final List tabs;
  //根据TabBar页面变化选择是否显示筛选按钮
  final bool showButton;
  //左侧 "中"
  final Image leftIcon;
  //搜索栏叠加的麦克风
  final Image rightIcon;
  //筛选按钮,叠加在tabbar上
  final Image tabRightIcon;
  //输入框controller，获取输入文字和预设文字
  final TextEditingController textEditingController;

  MyAppBarShow({
   
    Key key,
    this.tabController,
    this.tabs,
    this.showButton,
    @required this.textEditingController,
    this.leftIcon,
    this.rightIcon,
    this.tabRightIcon,
  }) : super(key: key);

  @override
  _MyAppBarState2 createState() => _MyAppBarState2();

  @override
  Size get preferredSize => new Size.fromHeight(kToolbarHeight);
}

首先肯定是一个StatefulWidget，要根据各种动作改变自身状态。而实现PreferredSizeWidget是因为在Scaffold中appBar的要求。对