Flutter BaseWidget的简单封装和使用

现如今大前端开发火热。各种眼花缭乱的框架、插件都想占个一亩三分地的市场。这样虽然提供给开发者的选择多了，但是也害苦了开发人员。如果选错了可能就是浪费自己的精力和时间了。对开发人员来说精力和时间还是很宝贵的。
那么这时候选择一个靠谱的框架就很重要了。刚好谷歌推出了Flutter，想着大厂还是有保障的，而且开发出来的应用流畅度各方面都挺优秀，即使可能在后面出现不可预测的平台互相封杀、使绊子等问题。最起码他还是能写安卓应用的。所以果断入坑了。虽然现阶段还有很多问题，但是相信随着时间的发展。这些都是能解决的。
在Flutter中万物皆widget，它不像原生开发中页面那么明确。比如安卓中的Activity、iOS中的UIViewController()。而我们在原生开发中为了方便自己后续的开发都会写一个BasePage.(BaseAvtivity/BaseViewController)。所以现在也尝试封装了一个简单的BaseWidget。下面是代码以及简要使用的说明方法。

BasePageWidget的简单封装

import 'package:flutter/material.dart';
abstract class HDBasePage extends StatefulWidget {
@override
  HDBasePageState createState() => HDBasePageState();
}
class HDBasePageState extends State with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive =>true ;
// appbar 的显示与否
bool showHead =true;
// appbarView 的高度
double appBarHeight = 0.0;
// 页面标题
String pageWidgetTitle = '';

@override
void initState() {
  super.initState();
  pageWidgetInitState();
},

@override
void dispose() {
  // TODO: implement dispose
  super.dispose();
}

void pageWidgetInitState() {}

/// 页面视图的主体部分（这里不要写_viewPageBody。不要加下划线，加了就是私有的，不能override了）
Widget viewPageBody() {return null;}

/// 配置页面底部bottomNavigationBar
Widget viewBottomNavigationBar() { return null; }

/// 配置页面头部标题
Widget AppBarTitle() {return Text(pageWidgetTitle);}

/// 配置页面头部的 bottom
PreferredSizeWidget AppBarBottom() {return null;}

/// 配置页面头部内容
 Widget AppBarSpace() {return null;}

/// 设置头部右上角icon
List <Widget> AppBarActions() {return null;}

/// 顶部返回和实体返回按键的响应事件
Future myBackClick() {return Future.value(true);}

// AppBar 的widget 
Widget _viewAppBar() {
    final _appbar = GradientAppBar(
    title: AppBarTitle(),
    bottom: AppBarBottom(),
    flexibleSpace: AppBarSpace(),
    gradient: Constant.navigationGradients,
    centerTitle:true,
    actions: AppBarActions(),
);
if (appBarHeight ==null ||appBarHeight ==0.0) {return _appbar;}
// 传入了appbar的高度，返回定制appbar的高度
return PreferredSize(
  child: _appbar,
  preferredSize: Size.fromHeight(appBarHeight),
);
}

@override
Widget build(BuildContext context) {
super.build(context);
ScreenUtil.instance = ScreenUtil(width:750, height:1334)..init(context);
return Scaffold(
backgroundColor: Color.fromRGBO(245,245,245,1.0),
appBar:showHead == true ? _viewAppBar() : null,
body: SafeArea(
  child: GestureDetector(
    onTap: () {
      debugPrint('base页面点击');
      FocusScope.of(context).requestFocus(FocusNode());
},
child: viewPageBody(),)),
bottomNavigationBar: viewBottomNavigationBar(),
);}}

以下是简单的使用：

import 'package:flutter/material.dart';
import 'base_page.dart';

class NewPage extends HDBasePage {
  @override
  _NewPageState createState() => _NewPageState();
}

class _NewPageState extends HDBasePageState<NewPage> {
  @override
  void pageInitState() {
    // TODO: implement pageInitState
    super.pageInitState();
    showHead = true ;
    pageWidgetTitle = '新的页面标题' ;
    appBarHeight = 80.0 ;  
  }
  
  @override
  Widget viewPageBody() {
    // 当前widget的具体内容
    return Container();
  }
}

以上就是BaseWidget的简单封装和使用了。本人菜鸟新手，知识积累有限。以上仅做记录，希望对看到文章的你有帮助。大牛就不用看了~

最后编辑于：2020.09.14 09:00:57