鹰眼视频 (二)

发表于 更新于

Flutter - 鹰眼视频

鹰眼视频 App 相关技术知识点,主要介绍如下几点技巧!

  • TabBar
  • TabBarView
  • DefaultTabController
  • tab 切换时阻止 widget 重绘

TabBar

Tab 页的 Title 控件，切换 Tab 页的入口，一般放到 AppBar 控件下使用，内部有*Title 属性。其子元素按水平横向排列布局，如果需要纵向排列，请使用 Column 或 ListView 控件包装一下。子元素为 Tab 类型的数组。

TabBarView

Tab 页的内容容器，其内放置 Tab 页的主体内容。子元素可以是多个各种类型的控件。

DefaultTabController

DefaultTabController，是一个默认的 tabView 控制器。不需要自己去维护 controller,由组件去维护。

tab 切换时阻止 widget 重绘

因为 Flutter 为了节约内存不会保存 widget 的状态，widget 都是临时变量。当我们使用 TabBar，TabBarView 是我们就会发现，切换 tab 后再重新切换回上一页面，这时候 tab 会重新加载重新创建，体验很不友好。不过 Flutter 还是为我们提供了解决办法。我们可以强制 widget 不显示情况下保留状态，下回再加载时就不用重新创建了。

AutomaticKeepAliveClientMixin 是一个抽象状态，使用也很简单，我们只需要用我们自己的状态继承这个抽象状态，并实现 wantKeepAlive 方法即可。

继承这个状态后，widget 在不显示之后也不会被销毁仍然保存在内存中，所以慎重使用这个方法。

1
2
3
4
5
6
7
class _VideoList extends State<VideoList> with AutomaticKeepAliveClientMixin {

  // 当页面不显示的时候也常驻在内存中
  @protected
  bool get wantKeepAlive=>true;

}

Demo 源码

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
import 'package:flutter/material.dart';
import 'package:yysp/view/VideoList.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

// 定义需要展示的 选项卡
final List<Tab> myTabs = <Tab>[
    new Tab(text: '推荐'),
    new Tab(text: '搞笑'),
    new Tab(text: '健康'),
    new Tab(text: '美女'),
    new Tab(text: '历史'),
    new Tab(text: '汽车')
  ];

  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
        length: myTabs.length,
        child: new Scaffold(
            appBar: AppBar(
                bottom: new TabBar(
                  tabs: myTabs,
                  isScrollable: true,
                ),
            ),
            body: new TabBarView(
                children: myTabs.map((Tab tab) {
                    return new Center(
                        // 此处我把VideoList进行了封装，导入使用就可以。
                        child: new VideoList(tab.text)
                    );
                }).toList(),
            )
        )
    );
  }

}

总结

Dart 语言还是有着独特的魅力，总是诱导我走向错误的边缘。Dart 是一个强类型的语言可不能按照 js 的标准去使用，要按照 TypeScript 标准去适应。
到了 Flutter 中，就需要大量的使用泛型、Map、List Json 与 ModelClass 的转换，差不多都是 java 的那一套方法论！