Tabbar

Tabbar通常创建为AppBar的AppBar.bottom部分,使用方式如下:

TabController _controller;
  int _selectedIndex = 0;
  final List<Widget> _tabViews = [
    Container(
      child: Text('This is hot page'),
    ),
    Container(
      child: Text('This is tech page'),
    ),
    Container(
      child: Text('This is financial page'),
    ),
  ];
  final List<Tab> _tabs = [
    Tab(
      text: '热门', //标题,和child不能同时存在,只能设置一个
//      child: Text('热门'), //标题,和text不能同时存在
      icon: Icon(Icons.home), //标题对应的图标
    ),
    Tab(
      text: '科技',
//      child: Text('科技'),
      icon: Icon(Icons.list),
    ),
    Tab(
      text: '金融',
//      child: Text('金融'),
      icon: Icon(Icons.more),
    ),
  ];
 
  @override
  void initState() {
    super.initState();
    _controller = TabController(vsync: this, length: _tabs.length);
    _controller.addListener(_handleTabSelection);
  }
 
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _controller.dispose();
  }
 
  void _handleTabSelection() {
    setState(() {
      _selectedIndex = _controller.index;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( //应用栏
        title: Text(widget.title),
        bottom: TabBar(
          controller: _controller, //TabBar控制器,通过给controller对象添加addListener方法来监听切换动作
          tabs: _tabs, //标签栏显示项集合
        ),
      ),
      body: _tabViews[_selectedIndex], //页面显示的内容
    );
  }

 

posted @ 2020-03-13 16:07  lai1322  阅读(250)  评论(0编辑  收藏  举报