Flutter Tabbar简单样例

最新推荐文章于 2025-05-07 10:00:00 发布

weixin_46642112

最新推荐文章于 2025-05-07 10:00:00 发布

阅读量198

点赞数

分类专栏： flutter

本文链接：https://blog.youkuaiyun.com/weixin_46642112/article/details/116653258

版权

本文详细介绍了如何在Flutter中创建和使用Tabbar，通过实例展示其基本配置和自定义选项，帮助开发者实现底部导航栏的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

class TabBarDemo extends StatefulWidget{
  @override
  _TabBarDemoState createState()=>_TabBarDemoState();
}
class _TabBarDemoState extends State<TabBarDemo>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 2,
      child: Scaffold(
      appBar: AppBar(
        title: Text('Tabbar简单样例'),
        elevation: 10,//阴影大小
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(68),
          child: Material(
            //背景色
            color: Colors.cyanAccent,
            child: TabBar(
              //是否可以横向滚动
              isScrollable: false,
              //设置未选中时的字体颜色，tabs里面的字体样式有限级最高
              unselectedLabelColor: Colors.grey,
              //设置未选中时字体样式，tabs里面的字体样式有限级最高
              unselectedLabelStyle: TextStyle(fontSize: 20),