flutter学习（六）DefaultTabController设计顶部滑动栏目

DefaultTabController可以设计类似于今日头条顶部的滑动栏。

效果

注意，这里的闪屏是因为夜神模拟器的bug
在这里插入图片描述
注：闪屏是因为夜神模拟器的bug

代码解析

顶部的标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

return DefaultTabController(
length: 2,
child:Scaffold(
appBar: AppBar(
title:Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: TabBar(
tabs: <Widget>[
Tab(text: "左边"),
Tab(text: "右边")
],
),
)
],
)
),
)
);

可以看到，这个模块是放在可以找到AppBar，并使用Expanded扩展出自己想要的效果

下方的内容，这里使用TabBarView对应内容，一个ListView对应一个界面，如第一个ListView这样写

1
2
3
4
5
6
7
8
9
10
11
12

body:TabBarView(
children: <Widget>[
ListView(
children: <Widget>[
ListTile(
title:Text("内容一")
),
ListTile(
title: Text("内容一"),
)
],
),

有几个滑动的标题，就写几个ListView即可

源代码

以下是全部代码

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

import 'package:flutter/material.dart';
import 'package:flutter_app/res/listData.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("左右切换"),
),
body: LayoutDemo()),
);
}
}

class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child:Scaffold(
appBar: AppBar(
title:Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: TabBar(
tabs: <Widget>[
Tab(text: "左边"),
Tab(text: "右边")
],
),
)
],
)
),
body:TabBarView(
children: <Widget>[
ListView(
children: <Widget>[
ListTile(
title:Text("内容一")
),
ListTile(
title: Text("内容一"),
)
],
),
ListView(
children: <Widget>[
ListTile(
title:Text("内容二")
),
ListTile(
title: Text("内容二"),
)
],
)
],
)
)
);

}
}