直播软件app开发，仿写导航栏快速实现页面导航

直播软件app开发，仿写导航栏快速实现页面导航

physics和dragStartBehavior属性的应用示例：

Copy code
TabBarView(
  controller: _tabController,
  physics: NeverScrollableScrollPhysics(), // 禁用滚动
  dragStartBehavior: DragStartBehavior.down, // 垂直滚动
  children: [
    // 子组件列表
    ...
  ],
)
 

​

onPageChanged： onPageChanged属性是一个回调函数，当用户滑动或切换选项卡时，将触发该函数。您可以在此回调函数中执行任何与选项卡切换相关的操作。

TabBar总结

通过将TabBarView与TabBar和TabController结合使用，您可以实现选项卡之间内容的同步切换。当用户切换选项卡时，TabController将相应地更新TabBarView中显示的内容，使用户能够轻松浏览不同的内容。TabBarView为创建选项卡式导航提供了便捷的方式，并且可以根据实际需求进行进一步的定制和样式设置。

TabBar实现底部导航的例子

 import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyTabPage(),
    );
  }
}
class MyTabPage extends StatefulWidget {
  @override
  _MyTabPageState createState() => _MyTabPageState();
}
class _MyTabPageState extends State<MyTabPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this); // 3是选项卡数量
  }
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('微信'),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          // 第一个选项卡的内容
          Container(
            child: Center(
              child: Text('聊天'),
            ),
          ),
          // 第二个选项卡的内容
          Container(
            child: Center(
              child: Text('群组'),
            ),
          ),
          // 第三个选项卡的内容
          Container(
            child: Center(
              child: Text('个人'),
            ),
          ),
        ],
      ),
      bottomNavigationBar: TabBar(
        controller: _tabController,
        tabs: [
          Tab(icon: Icon(Icons.chat), text: '聊天'),
          Tab(icon: Icon(Icons.group), text: '群组'),
          Tab(icon: Icon(Icons.person), text: '个人'),
        ],
        indicatorColor: Colors.blue, // 选中状态下的指示器颜色
        labelColor: Colors.blue, // 选中状态下的文本颜色
        unselectedLabelColor: Colors.grey, // 未选中状态下的文本颜色
      ),
    );
  }
} 

以上就是直播软件app开发，仿写导航栏快速实现页面导航， 更多内容欢迎关注之后的文章