zoukankan      html  css  js  c++  java
  • 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], //页面显示的内容
        );
      }
  • 相关阅读:
    vue学习
    BBS登录注册技术点归纳
    BBS项目模态框的使用
    django后台管理系统
    java 之 jsp简介
    http 之 CORS简介
    web 之 session
    linux 之学习路线
    Ubuntu 之 win10更新ubuntu启动项消失
    Web 之 Cookie
  • 原文地址:https://www.cnblogs.com/timba1322/p/12487123.html
Copyright © 2011-2022 走看看