Flutter 中的 TabBar、TabBarView 和 TabPageSelector

这篇实用的文章是关于 Flutter 中的TabBarTabBarViewTabPageSelector小部件的。我们将了解这些事物的基本原理,然后研究一个具体的例子来展示它们如何在行动中协同工作。

概述

选项卡视图在同一区域显示多个内容窗格(页面),您的用户可以通过向右/向左滑动或使用选项卡栏在它们之间切换。选项卡视图中的子项数量等于相应选项卡栏中的选项卡数量。更具体地说,选项卡视图中的每个子项对应于选项卡栏中的一个选项卡。

TabBarView 构造函数:

TabBarView({
  Key? key, 
  required List<Widget> children, 
  TabController? controller, 
  ScrollPhysics? physics, 
  DragStartBehavior dragStartBehavior = DragStartBehavior.start, 
  double viewportFraction = 1.0
})

TabBar 构造函数:

TabBar({
  Key? key, 
  required List<Widget> tabs, 
  TabController? controller, 
  bool isScrollable = false, 
  EdgeInsetsGeometry? padding, 
  Color? indicatorColor, 
  bool automaticIndicatorColorAdjustment = true, 
  double indicatorWeight = 2.0, 
  EdgeInsetsGeometry indicatorPadding = EdgeInsets.zero, 
  Decoration? indicator, T
  abBarIndicatorSize? indicatorSize, 
  Color? labelColor, 
  TextStyle? labelStyle, 
  EdgeInsetsGeometry? labelPadding, 
  Color? unselectedLabelColor, 
  TextStyle? unselectedLabelStyle, 
  DragStartBehavior dragStartBehavior = DragStartBehavior.start, 
  MaterialStateProperty<Color?>? overlayColor, 
  MouseCursor? mouseCursor, 
  bool? enableFeedback, 
  ValueChanged<int>? onTap, 
  ScrollPhysics? physics, 
 InteractiveInkFeatureFactory? splashFactory, 
  BorderRadius? splashBorderRadius
})

TabPageSelector 小部件用于显示一行小的圆形指示器,每个选项卡一个。所选选项卡的指示器将具有与其他选项卡不同的外观。TabBar、TabBarView 和 TabPageSelector 可以连接到控制器,可以像这样声明和初始化:

// Declare the tab controller
TabController? _tabController;

// The list of children of the TabView 
final _tabViewChildren = [/* a list of widget here */];

// initialize the tab controller
@override
  void initState() {
    _tabController =
        TabController(length: _tabViewChildren.length, vsync: this);
    super.initState();
}

为了更清楚,请参阅下面的完整示例。

完整的例子

应用预览

我们要制作的小演示在应用栏的底部有一个标签栏。它由 3 个选项卡组成:HomeShopNews。当您点击每个选项卡时,与之关联的页面就会出现。此外,我们在屏幕底部有一排点,表示当前选择的选项卡。以下是它的工作原理:

Flutter 中的 TabBar、TabBarView 和 TabPageSelector

代码

main.dart中的完整源代码以及注释中的解释:

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'KindaCode.com',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: const KindaCodeDemo(),
    );
  }
}

class KindaCodeDemo extends StatefulWidget {
  const KindaCodeDemo({Key? key}) : super(key: key);

  @override
  State<KindaCodeDemo> createState() => _KindaCodeDemoState();
}

// Don't forget TickerProviderStateMixin
// because we will use "vsync: this" later
class _KindaCodeDemoState extends State<KindaCodeDemo>
    with TickerProviderStateMixin {
  // Declare the tab controller
  TabController? _tabController;

  // the children of the TabView
  final _tabViewChildren = [
    Container(
      color: Colors.blue,
      child: const Center(
        child: Text(
          'Home',
          style: TextStyle(color: Colors.white, fontSize: 70),
        ),
      ),
    ),
    Container(
      color: Colors.red,
      child: const Center(
        child: Text(
          'Shop',
          style: TextStyle(color: Colors.white, fontSize: 70),
        ),
      ),
    ),
    Container(
      color: Colors.green,
      child: const Center(
        child: Text(
          'News',
          style: TextStyle(color: Colors.white, fontSize: 70),
        ),
      ),
    )
  ];

  // initialize the tab controller
  @override
  void initState() {
    _tabController =
        TabController(length: _tabViewChildren.length, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('KindaCode.com'),
        centerTitle: true,
        // implement the tab bar
        bottom: TabBar(
          controller: _tabController,
          tabs: const [
            Tab(
              icon: Icon(Icons.home),
            ),
            Tab(
              icon: Icon(Icons.shop),
            ),
            Tab(
              icon: Icon(Icons.newspaper),
            ),
          ],
        ),
      ),
      body: Stack(
        children: [
          // implement the tab view
          TabBarView(
            controller: _tabController,
            children: _tabViewChildren,
          ),
          // implement the dots indicator
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            height: 100,
            child: Container(
              height: 100,
              color: Colors.black54,
              alignment: Alignment.center,
              child: TabPageSelector(
                controller: _tabController,
                indicatorSize: 20,
                selectedColor: Colors.white,
                color: Colors.grey,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

结语

您已经了解了 TabBar、TabBarView 和 TabPageSelector 小部件。结合使用它们将帮助您构建更有意义和更强大的界面,并为您的用户提供更好的体验。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » Flutter 中的 TabBar、TabBarView 和 TabPageSelector