Flutter学习:关于Tab导航栏

Flutter关于Tab导航栏:

包括以下几种情况:
1、 底部Tab切换
2、 自定义顶部Tab
3、 使用TabController实现顶部Tab切换


1. 底部Tab切换

使用bottomNavigationBar实现底部Tab栏,这里需要注意控制切换的currentIndex,另外大于三个tab进行设置,type: BottomNavigationBarType.fixed配置底部tabs可以有多个按钮。

import 'package:flutter/material.dart';
import 'tabs/Category.dart';
import 'tabs/Home.dart';
import 'tabs/Setting.dart';
import 'tabs/User.dart';

class Tabs extends StatefulWidget {
  // 这里的index可以实现从其他页面跳转回来时,进入你需要的tab
  //  可见路由跳转的笔记--返回根路由
  final index;
  Tabs({Key key, this.index = 0}) : super(key: key);
  @override
  _TabsState createState() => _TabsState(this.index);
}

class _TabsState extends State<Tabs> {
  List pageList = [HomePage(), CategoryPage(), SettingPage(), UserPage()];
  int _currentIndex;
  _TabsState(index) {
    _currentIndex = index;
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: this.pageList[this._currentIndex],
      bottomNavigationBar: 
      BottomNavigationBar(
        currentIndex: this._currentIndex,
        // 点击
        onTap: (int index) {
          setState(() {
            this._currentIndex = index;
          });
        },
        iconSize: 28, // 图标大小
        fixedColor: Colors.blueAccent, // 图标颜色
        // 每一个BottomNavigationBarItem是一个tab
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home),label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
          BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle),label: "我的")
        ],
        type: BottomNavigationBarType.fixed, // 大于三个tab进行设置
      ),
    );
  }
}

2. 自定义顶部Tab

使用DefaultTabController进行自定义,tabs中放你需要定义的Tab,TabBarView则是相对应的页面内容展示,另外有一些tabbar常见属性如下:
TabBar常见属性

import 'package:flutter/material.dart';

class DemoPage extends StatefulWidget {
  DemoPage({Key key}) : super(key: key);

  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 2, // 顶部Tab切换的数量
        child: Scaffold(
            appBar: AppBar(
                title: Text("AppBarDemo"),
                centerTitle: true, // 标题居中
                backgroundColor: Colors.pinkAccent[100],
                bottom: TabBar(
                    labelColor: Colors.white, // 选中项颜色
                    indicatorColor: Colors.pink, // 底部选中条颜色
                    unselectedLabelColor: Colors.pinkAccent[50], // 未选择tab颜色
                    indicatorSize: TabBarIndicatorSize.label, // 底部选中条长度
                    tabs: <Widget>[
                      Tab(text: "热门"),
                      Tab(text: "我的")
                    ])),
            body: TabBarView(
              children: [
                ListView(
                  children: [
                    ListTile(
                      title: Text("这里是热门搜索"),
                    ),
                    ListTile(
                      title: Text("这里是热门搜索"),
                    ),
                    ListTile(
                      title: Text("这里是热门搜索"),
                    )
                  ],
                ),
                ListView(
                  children: [
                    ListTile(
                      title: Text("这里是我的内容"),
                    ),
                    ListTile(
                      title: Text("这里是我的内容"),
                    ),
                    ListTile(
                      title: Text("这里是我的内容"),
                    )
                  ],
                )
              ],
            )));
  }
}

也可以在已有底部tab的页面再放入一个顶部tab,这时可以使用Row进行包裹,Expanded布局,代码如下:

import 'package:flutter/material.dart';

class SettingPage extends StatefulWidget {
  SettingPage({Key key}) : super(key: key);

  @override
  _SettingPageState createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            // 顶部导航
            title: Row(
              children: <Widget>[
                Expanded(
                    child: TabBar(tabs: [
                  Tab(text: "热门"),
                  Tab(text: "推荐"),
                  Tab(text: "我的")
                ]))
              ],
            ),
          ),
          body: TabBarView(
            children: [
              ListView(
                children: [
                  ListTile(title: Text("这里是热门")),
                  ListTile(title: Text("这里是热门")),
                  ListTile(title: Text("这里是热门")),
                ],
              ),
              ListView(
                children: [
                  ListTile(title: Text("这里是推荐")),
                  ListTile(title: Text("这里是推荐")),
                  ListTile(title: Text("这里是推荐")),
                ],
              ),
              ListView(
                children: [
                  ListTile(title: Text("这里是我的")),
                  ListTile(title: Text("这里是我的")),
                  ListTile(title: Text("这里是我的")),
                ],
              )
            ],
          ),
        ));
  }
}

3. 使用TabController实现顶部Tab切换

如果页面中有请求数据,下拉刷新或者滑动切换等需求,使用第2点中所述方法就有些麻烦,这时我们可以使用TabController自定义顶部Tab。可以使用addListener()进行切换的监听。另外需要注意TabBar和TabBarView都需要controller: this._tabController

import 'package:flutter/material.dart';

class ControllerPage extends StatefulWidget {
  ControllerPage({Key key}) : super(key: key);

  @override
  _ControllerPageState createState() => _ControllerPageState();
}

class _ControllerPageState extends State<ControllerPage> with SingleTickerProviderStateMixin {
  TabController _tabController;

  // 组件初始化生命周期函数 加载时触发
  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length: 3, vsync: this);
    // 监听tab切换事件 可扩展
    _tabController.addListener(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("ControllerPage"),
          bottom: TabBar(
            controller: this._tabController, // 注意
            tabs: [Tab(text: "标题1"), Tab(text: "标题2"), Tab(text: "标题3")],
          ),
        ),
        body: TabBarView(
          controller: this._tabController, // 注意
          children: [
            Center(
              child: Text(
                "标题一页面",
                style: TextStyle(fontSize: 25.0),
              ),
            ),
            Center(
              child: Text(
                "标题二页面",
                style: TextStyle(fontSize: 25.0),
              ),
            ),
            Center(
              child: Text(
                "标题三页面",
                style: TextStyle(fontSize: 25.0),
              ),
            ),
          ],
        ));
  }
}

使用 FlutterTabBar 和 PageView 可以轻松实现多个页面切换的效果,以下是一个简单的示例: ```dart class MyTabbedPage extends StatefulWidget { @override _MyTabbedPageState createState() => _MyTabbedPageState(); } class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin { final List<Tab> myTabs = <Tab>[ Tab(text: 'Tab 1'), Tab(text: 'Tab 2'), Tab(text: 'Tab 3'), ]; TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(vsync: this, length: myTabs.length); } @override void dispose() { _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('My Tabbed Page'), bottom: TabBar( controller: _tabController, tabs: myTabs, ), ), body: TabBarView( controller: _tabController, children: myTabs.map((Tab tab) { final String label = tab.text.toLowerCase(); return Center( child: Text( 'This is the $label tab', style: const TextStyle(fontSize: 36), ), ); }).toList(), ), ); } } ``` 在这个示例中,我们创建了一个 `_MyTabbedPageState` 类来管理 TabBar 和 PageView 的状态。在 `initState` 中,我们创建了一个 `TabController` 对象,将其与 `TabBar` 和 `TabBarView` 绑定。在 `dispose` 中,我们释放了 `TabController` 对象。在 `build` 方法中,我们创建了一个 `Scaffold`,其中包含一个 `AppBar` 和一个 `TabBarView`。`TabBarView` 包含了一个 `children` 列表,其中每个元素都是一个 `Center` widget,包含一个 `Text` widget,用于显示当前选中的标签。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值