flutter实现头部tabTop滚动栏

 更新时间:2022年03月22日 17:04:48   作者:舜岳  
这篇文章主要为大家详细介绍了flutter实现头部tabTop滚动栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

本文实例为大家分享了flutter实现头部tabTop滚动栏的具体代码,供大家参考,具体内容如下

效果图如下:

main.dart代码如下:

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import 'package:flutter/material.dart';
//启动函数
void main() => runApp(MyApp());
 
//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //MaterialApp 是flutter的页面根组件
    return MaterialApp(
      title: 'main根页面',
      debugShowCheckedModeBanner: false,  //清除debug
      //home表示页面信息
      home: AppbarTop()
    );
  }
}
 
//头部tabTop滚动栏效果组件
import 'package:flutter/material.dart';
 
class AppbarTop extends StatefulWidget {
  @override
  _AppbarTopState createState() => _AppbarTopState();
}
 
//混合SingleTickerProviderStateMixin类 同步属性
class _AppbarTopState extends State<AppbarTop>
    with SingleTickerProviderStateMixin {
  //定义一个控制器
  TabController _tabController;
 
  @override
  void initState() {
    super.initState();
    //混入SingleTickerProviderStateMixin的this
    //实例化一个tab控制器 作用:
    _tabController = TabController(length: choices.length, vsync: this);
  }
 
  _nextPage(index) {
    int currentIndex = _tabController.index + index;
    if (currentIndex < -0) currentIndex = _tabController.length - 1;
    if (currentIndex >= _tabController.length) currentIndex = 0;
    //控制器移动到currentIndex处
    _tabController.animateTo(currentIndex);
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('头部菜单栏'),
        centerTitle: true, //title居中显示
        leading: IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () {
              _nextPage(-1);
            }),
        iconTheme: IconThemeData(color: Colors.yellow), //头部icon样式颜色
        //右边icon图标 可以多个
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.arrow_forward),
              onPressed: () {
                _nextPage(1);
              })
        ],
        actionsIconTheme: IconThemeData(color: Colors.white),
        //自定义导航栏
        bottom: PreferredSize(
            child: Theme(
              data: Theme.of(context).copyWith(accentColor: Colors.white),
              child: Container(
                height: 40,
                alignment: Alignment.center, //圆点居中
                //给自定义导航栏设置圆点控制器
                child: TabPageSelector(
                  controller: _tabController,
                ),
              ),
            ),
            preferredSize: Size.fromHeight(48)),
      ),
      //主体内容
      body: TabBarView(
        //主题内容也跟随控制器变化
        controller: _tabController,
        //将数据遍历成n个子组件数组
        children: choices.map((item) {
          return Padding(
            padding: EdgeInsets.all(20),
            child: ChoiceCard(
              choice: item,
            ),
          );
        }).toList(),
      ),
    );
  }
}
 
//ChoiceCard将数据渲染到Card卡片组件上
class ChoiceCard extends StatelessWidget {
  final Choice choice;
  const ChoiceCard({Key key, this.choice}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    //滚动时的卡片小部件
    return Card(
      color: Colors.blue,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(choice.icon, size: 120, color: Colors.white,),
          Text(choice.title),
        ],
      )
    );
  }
}
 
 
//数据的类型
class Choice {
  const Choice({this.title, this.icon});
  final String title;
  final IconData icon;
}
//模拟的数据
const List<Choice> choices = const <Choice>[
  const Choice(title: 'CAR', icon: Icons.directions_car),
  const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
  const Choice(title: 'BOAT', icon: Icons.directions_boat),
  const Choice(title: 'BUS', icon: Icons.directions_bus),
  const Choice(title: 'TRAIN', icon: Icons.directions_railway),
  const Choice(title: 'WALK', icon: Icons.directions_walk),
];

效果图2:

代码如下:

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
//头部tabTop滚动栏效果组件
class AppBarBottom extends StatefulWidget {
  AppBarBottom({Key key}) : super(key: key);
 
  @override
  _AppBarBottomState createState() => _AppBarBottomState();
}
 
class _AppBarBottomState extends State<AppBarBottom> {
  _SelectView(icon, text, id) {
    return PopupMenuItem(
        child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Icon(icon, color: Colors.blue),
        Text(
          text,
          style: TextStyle(color: Colors.black),
        )
      ],
    ));
  }
 
  @override
  Widget build(BuildContext context) {
    //tab使用这个组件
    return DefaultTabController(
        length: choices.length,
        child: Scaffold(
          appBar: AppBar(
            title: Text('AppBar与TabBar'),
            centerTitle: true,
            actions: <Widget>[
              PopupMenuButton(
                  shape: BeveledRectangleBorder(
                      borderRadius: BorderRadius.circular(10)),
                  itemBuilder: (BuildContext context) {
                    return [
                      PopupMenuItem(
                          child: _SelectView(Icons.message, '首页', 'A')),
                      PopupMenuItem(
                          child: _SelectView(Icons.message, '商品', 'B')),
                      PopupMenuItem(
                          child: _SelectView(Icons.message, '消息', 'C')),
                    ];
                  })
            ],
            bottom: TabBar(
              isScrollable: true,
              indicatorSize: TabBarIndicatorSize.label,
              tabs: choices.map((item) {
                return Tab(
                  text: item.title,
                  icon: Icon(item.icon),
                );
              }).toList(),
            ),
          ),
          body: TabBarView(
            children: choices.map((item) {
              return Container(
                width: double.infinity,
                color: Colors.white70,
                child: Padding(
                  padding: EdgeInsets.all(16),
                  child: ChoiceCard(
                    choice: item,
                  ),
                ),
              );
            }).toList(),
          ),
        ));
  }
}
 
//ChoiceCard将数据渲染到Card卡片组件上
class ChoiceCard extends StatelessWidget {
  final Choice choice;
  const ChoiceCard({Key key, this.choice}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    //滚动时的卡片小部件
    return Card(
        color: Colors.blue,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              choice.icon,
              size: 120,
              color: Colors.white,
            ),
            Text(choice.title),
          ],
        ));
  }
}
 
//数据的类型
class Choice {
  const Choice({this.title, this.icon});
  final String title;
  final IconData icon;
}
 
//模拟的数据
const List<Choice> choices = const <Choice>[
  const Choice(title: 'CAR', icon: Icons.directions_car),
  const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
  const Choice(title: 'BOAT', icon: Icons.directions_boat),
  const Choice(title: 'BUS', icon: Icons.directions_bus),
  const Choice(title: 'TRAIN', icon: Icons.directions_railway),
  const Choice(title: 'WALK', icon: Icons.directions_walk),
];

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/qq_41614928/article/details/105334809

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

最新评论