知识农场-开发过程记录

1. 从UI例程中选取素材

根据手绘页面，从UI例程中选取素材，做好记录

2. 主页面框架的搭建

2019.12.19-14:14
主页面有上边框显示“头像”、页面名称、“操作按钮”
下边框是导航栏，有五个，中间是个圆形浮动特殊导航栏。
1.先去例子中找合适的。
找到Blog-Blog Home1
2.开始理清例子代码逻辑
2.1例子使用的widget嵌套关系

各层widget都是什么，每个widget的各个属性都是什么

class BlogHomeOnePage extends StatelessWidget
	@override
	Widget build(BuildContext context) {
	return DefaultTabController(
		initialIndex: 0,
	 	length: 5,
		child: Theme(
			data: ThemeData(
			child: Scaffold(
				backgroundColor:Theme.of(context).buttonColor,
				appBar: AppBar(
				body: TabBarView(
				bottomNavigationBar:BottomNavigationBar(

DefaultTabController

DefaultTabController is an inherited widget that is used to share a TabController with a TabBar or a TabBarView. It’s used when sharing an explicitly created TabController isn’t convenient

就是顶部显示切换的tabs。

Theme

Applies a theme to descendant widgets.
A theme describes the colors and typographic choices of an application.
Descendant widgets obtain the current theme’s ThemeData object using Theme.of.

ThemeData

Scaffold

class BlogHomeOnePage extends StatelessWidget
	@override
	Widget build(BuildContext context) {
	return DefaultTabController(
		initialIndex: 0,
	 	length: 5,
		child: Theme(
			data: ThemeData(
				primaryColor: primaryColor,
				appBarTheme: AppBarTheme(
					color: Colors.white,
					textTheme: TextTheme(
					iconTheme: IconThemeData(
					actionsIconTheme: IconThemeData(
			child: Scaffold(
				 backgroundColor:Theme.of(context).buttonColor,
				 appBar: AppBar(
				 	centerTitle: true,
		            title: Text('Categories'),
		            leading: Icon(Icons.category),
		            actions: <Widget>[
		            bottom: TabBar(
		            	isScrollable: true,
						labelColor: primaryColor,
						indicatorColor: primaryColor,
						unselectedLabelColor: secondaryColor,
						tabs: <Widget>[
				 body: TabBarView(
				 	children: <Widget>[
				 		ListView.separated(
				 		Container(
                			child: Text("Tab 2"),
				 bottomNavigationBar:BottomNavigationBar(
					currentIndex: 1,
					type: BottomNavigationBarType.fixed,
					items: [
						BottomNavigationBarItem(
		                icon: Icon(Icons.home),
		                title: Text(""),

3. 配置路由
12.19-20：56
dart的with是接口实现
(没写)

4. 定义HomePage

5. 自己封装scaffold widget
相当于把scaffold重写了一遍，主要是pagaController和tabTap，进行切换页面。

6. 定义HomeDrawer
HomeDrawer是HomePage的侧边栏，用户资料以及一些设置选项，类似于QQ右滑侧边栏。因为涉及到用户信息，需要使用redux

7. 定义MyState，做全局变量管理
redux分三部分：Action、Reducer、Store，redux管理的对象就是state，把应用中所需的全局变量统一管理，自己定义一个MyState类，定义一下需要的state。

8. 定义appReducer
MyState 用于创建store，返回一个实例化好的MyState对象。实例化过程需要的参数，还需要定义。参数需要通过 UserReducer ThemeDataReducer LocaleReducer LoginReducer 来将 state 和 action 关联起来作为参数传入。

9. 定义UserReducer
MyState 需要定义 Action 和处理该 Action 的方法，然后定义 UserReducer 将他们绑定。还定义了 UserInfoMiddleware UserInfoEpic。
定义过程中用到了 User 这个类，需要定义。在 UserInfoEpic 中用到了 UserDao，也需要定义。

10. 在 lib/model/User.dart 中定义 User 类
User 类中定义了与用户相关的属性，以及 toJson 和 fromJson 两个方法，来做序列化。

11. 在 lib/common/dao/user_dao.dart 中定义 UserDao
User DAO（data access object (数据访问)对象）它是个对象，是做数据访问用的，访问的是本地或者数据库。里面定义了各种操作 User 相关信息的方法，如 login getUserInfoLocal getUserInfo clearAll getFollowerListDao 等。
用到了 LocalStorage 本地缓存，需要定义

12. 在 lib/common/local/local_storage.dart 中定义 LocalStorage
UserDao 通过使用常规依赖项 SharedPreferences 实现 save get remove 这几个常用方法

13. 涉及到一些应用常量的访问
UserDao lib/common/config/config.dart 中定义了 Config 和 NetConfig，里面保存了一些常量的配置信息，如主题颜色等

14. 登录涉及到http网络通信
UserDao lib/common/net/ 定义了各种相关类、方法、对象，以及一些url常量的存储

15. 数据库的访问
UserDao UserInfoDbProvider（未完成）

16. 定义 ThemeDataReducer
MyState

17. 定义 LocaleReducer
MyState

18. 定义 LoginReducer
MyState

19. 管理 login 状态时，涉及到登录成功路由跳转
LoginReducer lib/common/utils/navigator_utils.dart 定义 NavigatorUtils 类，里面定义各种页面跳转函数，push、pushNamed、pushReplacementNamed

20. 登录时显示loading动画
LoginReducer 缺少动画，去编写common_utils.dart，实现CommonUtils类，定义 showLoadingDialog 方法

21. 编写common_utils.dart，定义CommonUtils类

22. 定义了一个widget MyFlexButton
lib/widget/my_flex_button.dart/MyFlexButton

23. 对话弹窗，定义showMyDialog
lib/common/utils/navigator_utils.dart/showMyDialog 有了这个就及其方便了，1.更改当前app语言 2.內容编辑框 3.版本更新弹窗
退出的时候直接Navigator.pop(context)

24. 继续完成 LoginPage
发现又需要自己定义一个输入框控件

25. 输入控件 MyInputWidget

26. 没有报错后，开始启动整个app
发现直接从void main() => runApp(MyApp()); return MaterialApp( 不行，本地化根本没起作用，最后只能按例程app重新构建app启动的架构

27. main.dart的编写

正式自己项目的开发

1. HomePage 上边框的开发
5个tabPages是包在HomePage中的，其实整个应用就是一个Scaffold widget。
现在要更改上边框，选中不同tabPage，显示不同的上边框。
上边框分三部分，左边是“头像”（不变）， 中间是“标题”（改变），右边是“其他按钮”（改变）。
上边框是 Scaffold 中的 appBar 中的 title。