Flutter如何添加顶部tab切换页面

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

import 'package:flutter/material.dart';

class MainTabBarView extends StatelessWidget {
  static final List<String> tabTitles = ['首页','通讯录','发现','我的'];

  const MainTabBarView({super.key});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: tabTitles.length,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('flutter app'),
            bottom: TabBar(
              tabs: tabTitles.map((title) => Tab(text: title)).toList(),
              indicatorColor: Colors.blue,
              labelColor: Colors.blue,//Colors.white
              unselectedLabelColor: Colors.grey,
              labelStyle: const TextStyle(
                fontSize: 22,
              ),
              unselectedLabelStyle: const TextStyle(
                fontSize: 20,
              ),
              indicatorSize: TabBarIndicatorSize.tab,
              //若打开下述指示器效果，labelColor由Colors.blue更换为Colors.white
              // indicator: BoxDecoration(
              //   color:Colors.blue,// 背景颜色为蓝色
              //   border: Border.all(color: Colors.blue, width: 2),
              //   borderRadius: BorderRadius.circular(10),
              //   boxShadow: const [
              //     BoxShadow(
              //       color: Colors.blue,
              //       offset: Offset(3, 3),
              //       blurRadius: 5,
              //     ),
              //   ], // 阴影效果
              // ),
            ),
          ),
          body: const TabBarView(
            children: [
              HomeTab(),
              ContactsTab(),
              DiscoverTab(),
              MineTab(),
            ],
          ),
        ));
  }
}

class HomeTab extends StatelessWidget {
  const HomeTab({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('首页'),
    );
  }
}

class ContactsTab extends StatelessWidget {
  const ContactsTab({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('通讯录'),
    );
  }
}
class DiscoverTab extends StatelessWidget {
  const DiscoverTab({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('发现'),
    );
  }
}

class MineTab extends StatelessWidget {
  const MineTab({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('我的'),
    );
  }
}