【Flutter】TabBarView实现多Tab页切换

悠悠 2023-07-22 03:59 14阅读 0赞

我们在Flutte中通过`TabBar`和`TabBarView`的组合实现多标签页的APP结构

首先定义page1如下：

import 'package:flutter/material.dart';
    
    class Page1 extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        return Column(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(10.0),
              child: Image.asset('assets/san-clemente.jpg'),
            )
          ],
        );
      }
    }

同上，定义其他标签页，page2、page3、page4

`main.dart`中实现如下：

import 'package:flutter/material.dart';
    import './page1.dart';
    import './page2.dart';
    import './page3.dart';
    import './page4.dart';
    
    void main() => runApp(
          MaterialApp(
            debugShowCheckedModeBanner: false,
            home: MyApp(),
          ),
        );
    
    class TabInfo { 
      String label;
      Widget widget;
      TabInfo(this.label, this.widget);
    }
    
    class MyApp extends StatelessWidget { 
      final List<TabInfo> _tabs = [
        TabInfo("SAN CLEMENTE", Page1()),
        TabInfo("HUNTINGTON BEACH", Page2()),
        TabInfo("SHAKE SHACK", Page3()),
        TabInfo("THE HAT", Page4()),
      ];
    
      @override
      Widget build(BuildContext context) { 
        return DefaultTabController(
          length: _tabs.length,
          child: Scaffold(
            appBar: AppBar(
              title: Text('Tab Controller'),
              bottom: PreferredSize(
                child: TabBar(
                  isScrollable: true,
                  tabs: _tabs.map((TabInfo tab) { 
                    return Tab(text: tab.label);
                  }).toList(),
                ),
                preferredSize: Size.fromHeight(30.0),
              ),
            ),
            body: TabBarView(children: _tabs.map((tab) => tab.widget).toList()),
          ),
        );
      }
    }

Head部分使用TabBar，Body部分使用TabBarView，整个用`DefaultTabController`进行组合。`DefaultTabController`的作用是负责Head和Body的同步：点击Head切换body，滑动Body切换Head

另外当标签过多时，Head可以进行滑动，此时需要将Tab中的isScrollable设为true，另外需要将`TabBar`使用`PreferredSize`包裹使用