flutter: 使用tabbar和tabbarview

一，代码：

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

class TabPage extends StatefulWidget {
  @override
  State<TabPage> createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> {

  var appBarHeight = AppBar().preferredSize.height;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text("首页"),
      ),

      body: Column(
        children: [
          //其他内容
          Container(
            height: 100,
          ),
          //tabbar的容器，用来指定高度
          Container(
            height: 457,
            color: Colors.orange,
            child: DefaultTabController(
              length: 4,      //标签的数量
              child: Column(
                children: [
                  TabBar(
                    labelColor: Color.fromRGBO(232, 19, 36, 1),
                    labelStyle: const TextStyle(fontWeight: FontWeight.bold),
                    unselectedLabelColor: const Color.fromRGBO(34, 34, 34, 1),
                    unselectedLabelStyle: const TextStyle(
                    fontWeight: FontWeight.normal, fontSize: 14),
                    indicatorColor: Colors.red,
                    indicatorSize: TabBarIndicatorSize.tab,
                    indicatorWeight: 0,
                    indicatorPadding: EdgeInsets.symmetric(vertical: 10,horizontal: 15),
                    //indicator: const BoxDecoration(),   //取消指示器
                    indicator: ShapeDecoration(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                      color: Colors.grey,
                    ),
                    dividerHeight: 0,   //取消分隔的横线

                    tabs: const <Widget>[    //四个标签
                      Tab(text: "高速"),
                      Tab(text: "交通"),
                      Tab(text: "银行"),
                      Tab(text: "医院"),
                    ],
                    onTap: (value) {     //点击事件，点击后处理其他逻辑
                      print("click value:");
                      print("点击了第{$value}个标签");
                      setState(() {
                      });
                    },
                  ),
                  Container(     //tabbarview的容器
                    height: 200,
                    child: TabBarView(     //四个tabbarview
                      children: <Widget>[
                        Center(
                          child: Text('这是第1个tabview'),
                        ),
                        Center(
                          child: Text('这是第2个tabview'),
                        ),
                        Center(
                          child: Text('这是第3个tabview'),
                        ),
                        Center(
                          child: Text('这是第4个tabview'),
                        ),
                      ],
                    ),
                  ),
                ],
                ),

              ),
            ),
    ],
      ),
    );
  }
}

 

二，测试效果: