Flutter►第九章：框架升级

基础框架

[toc]

框架的接入

为了有更好的用户体验，我们对页面框架进行如下优化。

页面框架

1、页面头appbar、页面身successWidget

1、错误页和空白页的页面，需要自定义

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
import 'package:flutter_effect/flutter_effect.dart';

// 修改地方1.1继承: BJHBasePage
//class TSBasePage extends StatefulWidget {
class TSBasePage extends BJHBasePage {

}

// 修改地方1.2继承: BJHBasePageState
//class _TSBasePageState extends State<TSBasePage> {
class _TSBasePageState extends BJHBasePageState<TSBasePage> {
  
  	// 修改地方2.0:删除/注释掉原来的 Widget build(BuildContext context){}
    //@override
    //Widget build(BuildContext context) {
    //  return Scaffold(
    //    backgroundColor: Color(0xffF0F0F0),
  	//	  appBar: appBarWidget,
    //    body: bodyWidgets,
    //  );
    //}
  	// 修改地方2.1:将其中的导航栏 appBarWidget 通过 PreferredSizeWidget appBar() {} 返回
  	// 当你的导航栏是使用系统的AppBar时候，重写appBar()方法，如
  	@override
    PreferredSizeWidget appBar() {
      return AppBar(
        title: Text("导航栏标题"),
      );
    }
  	// 当你的导航栏不是使用系统的AppBar，而是自己在page上添加的Widget的时候，重写 Widget appBarWidget(BuildContext context)方法，如
  	@override
  	Widget appBarWidget(BuildContext context) {
      return EasyAppBar(
        title: '我是成功页面的标题',
      );
      return CommonAppBar(
        title: AppBarTitleWidget(text: '我是成功页面的标题'),
        leading: AppBarBackWidget(
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      );
 	 }
  
    // @override
    // Color backgroundColor() {
    //   return Color(0xFFF0F0F0);
    // }

    // 修改地方2.2:将其中的 bodyWidgets 通过 Widget buildSuccessWidget(BuildContext context) {} 返回，则当前调用 updateWidgetType(WidgetType.SuccessWithData); 的时候，其会将视图更新为该方法返回的样式
    @override
    Widget buildSuccessWidget(BuildContext context) {
      return bodyWidgets;
    }
  
  	// 修改地方2.2:自定义【请求成功，但无数据】的界面
  	@override
    Widget buildNodataWidget(BuildContext context) {
      return StateNodataWidget(
        image: AssetImage('assets/images/nodata.png')
        mainTitle: '我是【请求成功，但无数据】的界面',
        subTitle: '',
      );
    }
		
  	// 修改地方2.3:自定义【请求失败】的界面
    @override
    Widget buildErrorWidget(BuildContext context) {
      return StateErrorWidget(
        //color: Colors.transparent, //可设置背景色，常用语本page有设置背景图片的时候
        errorRetry: getData,
      );
    }
  	
  
		// 请求网络的方法名可任意（不再需要保证为getData,因为错误页和空白页的重新加载需要在本dart文件设置)
  	void getData() {
				...
        
        // 修改地方4:对返回的数据进行判空及更新状态
        Api.getGoodsInfoList({}).then((ResultData data) {
          if (data.isSuccess) {
            ...

            // 修改地方4.1:对请求到数据，且状态正确的数据进行判空及更新状态
            if (bean == null) {
              updateWidgetType(WidgetType.SuccessNoData);
            } else {
              updateWidgetType(WidgetType.SuccessWithData);
            }

          } else {
            // 修改地方4.2:对请求到数据，但状态错误的处理
            //updateWidgetType(WidgetType.ErrorBusiness);
          }
    		}).catchError(onError) {
          // 修改地方4.3:对请求失败，如服务器崩溃，无网络等的处理
          updateWidgetType(WidgetType.ErrorNetwork);
        };
		}
  
}

2、初始界面buildInitWidget

其他，如果你还想设置初始页面，目前初始视图默认是空白视图

1
2
3
4
5
6
7
8
9
10
11
12
@override
 Widget buildInitWidget(BuildContext context) {
   return Container(
     color: Colors.green,
     height: 100,
     child: Text(
       '我是初始视图...',
       style: TextStyle(color: Colors.blue, fontSize: 24),
       textAlign: TextAlign.center,
     ),
   );
 }

3、背景色、背景图片

设置背景图片

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
// 背景视图(常用来设置背景图片)
@override
 Widget backgroundWidget(BuildContext context) {
   // 设置背景色
   return Container(
     color: Color(0xFFF0F0F0),
   );

   // eg1:设置铺满的背景图片
   // return Container(
   //   alignment: Alignment.topCenter,
   //   //color: Colors.yellow,
   //   constraints: const BoxConstraints(
   //     minWidth: double.infinity,
   //     minHeight: double.infinity,
   //   ),
   //   child: Image.asset(
   //     "images/wish/bg_icon.png",
   //     fit: BoxFit.fitWidth,
   //   ),
   // );

   // eg2:设置绝对定位的背景图片
   // return Positioned(
   //   top: 0,
   //   right: 0,
   //   left: 0,
   //   height: Adapt.px(678),
   //   child: Image.asset(
   //     "images/wish/bg_icon.png",
   //     fit: BoxFit.fitWidth,
   //   ),
   // );
 }

End