Flutter的TabBar

最新推荐文章于 2025-06-23 16:39:00 发布

帅气的人123

最新推荐文章于 2025-06-23 16:39:00 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： flutter tab 移动开发

本文链接：https://blog.csdn.net/qq_39116472/article/details/112687185

Flutter 专栏收录该内容

2 篇文章

订阅专栏

今天我学习了TabBar，先看看我搞的效果

上面的是可以左右滑动的。接下来我们来看看怎么使用Dart来完成这样一个简单的Demo把。

先是来说一下布局把，布局使用 DefaultTabController 这里面需要设置tab的长度是多少，包裹 Scaffold 然后再 Scaffold 里面设置属性值 button 设置里面显示的内容是什么这里显示的是Text("内容")，然后设置完之后在body属性里面设置TabBarView(child: <Widget>[设置你要显示的东西])

可以设置对TabBar 的监听事件使用TabContainer但是这个类需要继承SingleTickerProviderStateMixin。

代码示例：

class _OptionHttpChild extends State<OptionHttp>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    _tabController = new TabController(length: 4, vsync: this);
// 监听点击事件
    _tabController.addListener(() {
      print(_tabController.index);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 4,
        child: Scaffold(
          appBar: AppBar(
            title: Text("Http请求示例（第三方库）"),
            bottom: TabBar(
              controller: _tabController,
              indicatorSize: TabBarIndicatorSize.label,
              tabs: [
                Text("Get"),
                Text("Post"),
                Text("Get请求并渲染"),
                Text("Post请求并渲染"),
              ],
            ),
          ),
          body: Container(
            child: TabBarView(controller: _tabController, children: [
              Column(children: [
              // tabbar的数组和下面的数组应该一一对应
                RaisedButton(onPressed: () {

                }, child: Text("获取数据"),)
              ],),
              Text("data"),
              Text("data"),
              Text("data"),
            ]),
          ),
        ));
  }
}

欢迎大家关注我的公众号每天更新生活，发布技术【Java web、Flutter】