Flutter 自定义 Tabbar

效果示例

代码示例

思考方向，我也看了很多网上的很多博客都很难对于一个小白来说我感觉很吃力我就另辟蹊径在原来的基础上经行了加工

• AppBar的title需要的是一个Widget组件
  • 把这个组件设置成了Row类型的组件

代码示例

class _HomeImp extends State<_Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 在这里引入类
        title: IndexTabBar(),
      ),
      bottomNavigationBar: MyBottomNavigation(),
    );
  }
}

核心代码

/// AppBar实现类
class IndexTabBar extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _IndexTabBarImp();
  }
}

class _IndexTabBarImp extends State<IndexTabBar> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
          // 左边的一个小Icon 可以点击设置自己的位置信息
        InkWell(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[Icon(Icons.four_k), Text("邯郸",style: TextStyle(fontSize: 15),)],
          ),
          onTap: () {},
        ),
          // 检索栏的代码
        Container(
          height: 38,
          width: 260,
          margin: EdgeInsets.only(left: 5),
          padding: EdgeInsets.fromLTRB(15, 0, 5, 0),
          decoration: BoxDecoration(
              border: Border.all(color: Colors.grey, width: 1.0),
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(30.0))),
          child: InkWell(
            child: Row(
              children: <Widget>[
                Align(
                  alignment: Alignment.centerLeft,
                  child: Icon(
                    Icons.search,
                    color: Colors.grey,
                  ),
                ),
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    "文书检索",
                    style: TextStyle(color: Colors.grey, fontSize: 15),
                  ),
                )
              ],
            ),
              // 设置点击跳转事件
            onTap: () => Navigator.pushNamed(context, "/search"),
          ),
        )
      ],
    );
  }
}

到这里就算是完成了一个自定义的AppBar

很简单，效果也还可以的明天会带大家搞一下 BottomNavigationBar

关注我学习更多Flutter 、 Java Web相关的知识
公众号：