QT January 14, 2020

【QT】QListWidget、QScrollArea等添加触摸滚动和惯性滚动

Words count 8k Reading time 7 mins.

前言

平时使用QListWidget/QScrollArea等内容视图可以滚动的控件时,一般是通过它们的滚动条来实现滚动的。在智慧课堂项目中,实施的学校使用的是一体机–window系统可触摸的大屏。当然...

Read article

QT January 14, 2020

【QT】QListWidget、QScrollArea等添加触摸滚动和惯性滚动

Words count 8k Reading time 7 mins.

前言

平时使用QListWidget/QScrollArea等内容视图可以滚动的控件时,一般是通过它们的滚动条来实现滚动的。在智慧课堂项目中,实施的学校使用的是一体机–window系统可触摸的大屏。当然也可以通过滚动条来拖动,但这对于习惯于手机触摸交互的用户来说,操作起来是很不友好的。因此,需要让这些控件支持触摸滚动。主要的实现方式有两种:

  1. 通过自定义控件,子类化这些滚动控件,重新实现它们的mousePressEvent、mouseMoveEvent和mouseReleaseEvent等事件处理...
Read article

QT January 14, 2020

【QT】动态添加 Horizontal Line 和 Vertical Line

Words count 1.1k Reading time 1 mins.

前言

根据业务的需求,有时我们需要用到一条水平分割线或者一条垂直分割线,在Designer里边,我们可以直接拖动一个Horizontal Line/Vertical Line来实现需求。但假如需要动态添加呢?在QT Assistant里边查找QLine/Line,发现并没有满足该需求的控件。但在qss中配置分割线的样式时,发现选择器使用的是QFrame,于是去翻查QFrame的属性等,发现QFrame有个Shape的概念,里边就有两个枚举:HLine和VLine。这就是我们实现的方法

步骤

  1. 创建一...
Read article

REACT NATIVE September 07, 2018

【React Native】一、原生UI组件

Words count 26k Reading time 24 mins.

前言

React Native封装了大部分最常见的组件,但有时我们需要一些特殊的组件是React Native没有提供的。该文章将细说如何在React Naitve应用程序中封装和植入已有的原生UI组件。

步骤

  1. 创建一个ViewManager的子类
  2. 实现createViewInstance方法
  3. 导出视图的属性设置器:使用@ReactProp(或@ReactPropGroup)注解
  4. 把这个视图管理类注册到应用程序包的createViewManagers里
  5. 实现JavaScript模块

具体代码实现...

Read article

REACT NAVIGATION August 29, 2018

【React Navigation】完整例子

Words count 960 Reading time 1 mins.

项目介绍

该项目将React Native 中文网 - 文档这部分内容浓缩为成一个android程序,方便童鞋们随时随地掏出手机学习React Native:

  1. 项目包含了React Navigation的部分章节内容,可以通过该项目源码配合熟悉之前的知识
  2. 需要打包的童鞋,可以参考章节IOSAndroid

项目地址

ReactOne

项目截图

Read article

REACT NAVIGATION August 29, 2018

【React Navigation】十三、在任意组件中使用navigation属性

Words count 9.9k Reading time 9 mins.

withNavigation是一个更高阶的组件,它可以将navigation属性传递给一个包装好的组件。当您无法直接将navigation传递到组件中,或者不想在深层嵌套的子项中传递它时,它将很有用。

1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from &...
Read article

REACT NAVIGATION August 29, 2018

【React Navigation】十二、自定义Android返回键的行为

Words count 4.6k Reading time 4 mins.

在默认情况下,当用户点击返回键时,react-navigation将会返回上一级页面,或者直接退出程序(当没有上一级页面时)。这是默认的合理处理,但有些情形下我们可能希望自定义返回键的一些行为。

假如你正在查找一种简单的处理,可以直接导出社区开源的包:react-navigation-backhandler。在接下来的小节中,我们将会介绍这个包是如何实现返回键的自定义功能的

举个例子,在某个页面,用户选择了列表的某一项,选中的那项当前是选中状态。当你按下返回键时,你首先希望的是选中的那项变成不被...

Read article

REACT NAVIGATION August 29, 2018

【React Navigation】十一、导航器嵌套使用的一些注意事项

Words count 27k Reading time 25 mins.

每个页面都可以配置来决定它在导航器中的呈现方式。在基础文档的配置标题栏部分,我们介绍了它的工作原理。

在本文档中,我们将会解释当有多个导航器一起使用时它是如何工作的。看完该章节,你将学习到如何将navigationOptions放在正确的位置,并确保可以正确的配置导航器。如果你把它们放在错误的地方,有可能什么都不会发生,但也可能会发生令人困惑和意外的事情。值得庆幸的是,以下的环节理解起来相对比较简单。

只能从导航器的某个屏幕组件来修改它的导航选项。这同样适用于导航器嵌套使用的情况

试想这样的一种...

Read article

REACT NAVIGATION August 29, 2018

【React Navigation】十、沉浸式状态栏

Words count 18k Reading time 17 mins.

堆栈导航器和抽屉导航器下的沉浸状态栏

在使用堆栈导航器和抽屉导航器下实现沉浸状态栏相对比较简单,你可以直接使用由React Native提供的StatusBar组件,并设置你的配置。

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
import React from...
Read article

REACT NAVIGATION August 29, 2018

【React Navigation】九、createSwitchNavigator-身份认证流程

Words count 24k Reading time 22 mins.

大部分应用在用户访问与用户相关的数据或者其他一些私有内容时,需要先进行身份验证。通常,流程将如下所示:

  • 用户打开应用程序
  • 该应用从数据存储层加载一些身份验证的状态(例如从AsyncStorage加载)
  • 加载状态后,通过判断是否加载了有效的身份验证状态,来决定跳转到身份验证界面或者主应用界面
  • 当用户注销时,我们清除身份验证状态,并返回到身份验证界面

配置我们的导航器

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...
Read article

REACT NAVIGATION August 29, 2018

【React Navigation】八、createDrawerNavigator-抽屉导航器

Words count 6.6k Reading time 6 mins.

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
import React from 'react';
import { Text, View, Button, Image, StyleSheet } from 'react-native';
import {...
Read article
Load more
0%