天天看点

Flutter Tabbar简单样例

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),
              //设置选中时的字体颜色,tabs里面的字体样式优先级最高
              labelColor: Colors.blueGrey,
              //设置选中时的字体样式,tabs里面的字体样式优先级最高
              labelStyle: TextStyle(fontSize: 22),
              //选中下划线的颜色
              indicatorColor: Color(0xff0080ff),
              //选中下划线的长度,label时跟文字内容长度一样,tab时跟一个Tab的长度一样
              indicatorSize: TabBarIndicatorSize.label,
              tabs: [
                Container(
                  alignment: Alignment.center,
                  height: 68,
                  child: Text('选项一'),
                ),
                Container(
                  alignment: Alignment.center,
                  height: 68,
                  child: Text('选项二'),
                ),
              ],
              onTap: (int index){},
            ),
          ),
        ),
      ),
      body: Container(),
    ),
    );
  }
}