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

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

physics和dragStartBehavior属性的应用示例：

 

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

​

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

TabBar总结

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

 

TabBar实现底部导航的例子

 

1

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

 

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