Sil Base Widget Package

Description:

sil base widget package

基础组件
Features #

base_widgets 基础组件
common_pages 公共页面
future_builder 封装futureBuilder
refresh 封装刷新组件

Getting started #
Sil_base_widget_package:
git:
url: http://gitlab.changshaxiemeng.com/xiemeng/fultter/flutter/Sil_alert_dialog_package
ref: laster
copied to clipboard
Usage #
一、基础组件
1.1 简单基础组件
/// 初始化基础widget,设置适配基于的设计尺寸
SilBaseWidgetSetting.init(designSize: Size(375, 667));

/// 虚线
SilDashLine(Size.fromHeight(0.5), color: Colors.yellow[800], spacing: 2);

/// 文本
SilText('data', style: TextStyle(fontSize: 14), textAlign: TextAlign.center);

/// 加载本地图片
SilImage('imgPath', height: 40, width: 40);

/// 加载网络图片
SilImage(
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F017e0155fa35d232f875a132692718.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653704266&t=370e33972e19e13c0b6129d15d9d37fa',
placeholder: Container(color: Colors.yellow, width: 20, height: 20));

/// 文本按钮
SilButton(
title: '文本按钮',
radius: 6,
titleColor: Colors.yellow,
height: 50,
width: 80,
borderWidth: 1,
onTapFunc: () {},
);

/// 图标按钮
SilButton(
imgPath:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F017e0155fa35d232f875a132692718.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653704266&t=370e33972e19e13c0b6129d15d9d37fa',
borderColor: Colors.black12,
borderWidth: 2,
radius: 4,
width: 60,
height: 60,
onTapFunc: () {},
);

/// 文本图标按钮
SilTextIconButton(
SilText('设置'),
SilLocalImage('imgs/commom/setting.png'),
imagePosition: ImagePosition.Left,
space: 10,
onTap: () {},
);

/// 单选按钮
SilRadioButton(
mormalWidget: SilImage('imgs/commom/normal.png'),
selectedWidget: SilImage('imgs/commom/selected.png'),
height: 30.w,
width: 30.w,
);

/// 空数据页面
// 1 通过data参数设置
SilEmptyDataWidget(
emptyData: SilEmptyData(
imagePath: 'hello.img', prompt: '这里空空如也', btnTitle: '前往游戏库，探索更多游戏'));

// 2 自定义空页面
Widget customContent() {
return Container(
alignment: Alignment.center,
margin: EdgeInsets.only(top: 120, left: 20, right: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SilLocalImage('imgs/common/common_nodata.png',
width: 200.w, height: 200.w),
Padding(padding: EdgeInsets.only(top: 5)),
SilText("暂无数据～",
style: TextStyle(color: Color(0xFF666666), fontSize: 16.sp)),
],
),
);
}

SilEmptyDataWidget(customWidget: customContent());

/// 网络异常页面
SilNetErrorWidget(
prompt: '当前网络不给力',
bottomButtonTitle: '点击屏幕重试',
reloadFunc: () {},
customWidget: Container());

/// 输入框
inputDemo() {
return Container(
color: Colors.yellow,
child: SilTextField(
hintText: "请输入密码",
interface: SilFormattersPwd(),
onValid: (bool valid, String value) {
print("valid = ${valid},value = ${value}");
},
min: 8,
max: 10,
),
);
copied to clipboard
1.2 组合组件：底部弹窗Sheet选择器
/// 直接使用基础组件
testSilBottomPickerWidget() {
return SilBottomSheet.show(
context: context,
child: SilBottomPickerBaseWidget(
child: Container(height: 100, color: Colors.yellow),
));
}

/// 测试时间选择器组件
int initialHours = 8;
int initialMinute = 10;
testSilBottomTimePickerWidget() {
return SilBottomSheet.show(
context: context,
child: SilBottomTimePickerWidget(
'提醒时间',
initialHours: initialHours,
initialMinute: initialMinute,
themeColor: Color.fromRGBO(255, 0, 134, 1),
tapSureSeletedFunc: (int hour, int minute) {
initialHours = hour;
initialMinute = minute;
Navigator.pop(context);
},
));
}

/// 测试时间日期选择器
/// 默认选中的日期和时间
DateTime initialDateTime = DateTime.now();
testSilBottomDatePickerWidget() {
SilBottomSheet.show(
context: context,
child: SilBottomDatePickerWidget('请选择生产日期',
mode: CupertinoDatePickerMode.date,
use24hFormat: true,
themeColor: Color.fromRGBO(255, 0, 134, 1),
dateOrder: DatePickerDateOrder.ymd,
initialDateTime: initialDateTime,
tapSureSeletedFunc: (DateTime time) {
initialDateTime = time;
Navigator.pop(context);
}));
}

/// 测试单条数据选择器
List<String> list = ['120', '300', '600', '1200', '18000'];
int selectedIndex = 0;
testSilBottomPickerSimpleWidget() {
SilBottomSheet.show(
context: context,
child: SilBottomPickerSimpleWidget(
'开封保质期',
middlePrompt: '个月',
middlePromptPadding: EdgeInsets.only(left: 100),
initialSelectedItem: selectedIndex,
dataList: list,
themeColor: Color.fromRGBO(255, 0, 134, 1),
tapSureSeletedFunc: (index) {
selectedIndex = index;
Navigator.pop(context);
},
));

/// 底部弹窗菜单
List<String> items = ['相机', '相册'];
SilBottomSheet.show(
context: context,
child: SilBottomSheetWidget(
itemList: items,
warnTitle: '删除',
tapSureSeletedFunc: (index) {
print('选中了第$index个');
Navigator.pop(context);
},
tapWarnFunc: () {
print('点击了删除');
Navigator.pop(context);
},
));

/// 顶部分栏组件
SilTopTabBarWidget(
titles: ['GM游戏', 'SFC游戏', 'SFC游戏'],
indicatorWidth: 24.w,
isShowCenter: true,
itemBuilder: (context, index) {
if (index == 0) return Container(color: Colors.yellow);

return Container(color: Colors.green);
});

copied to clipboard
二、SilFutureBuilderWidget 封装网络异步加载组件
/// SilFutureBuilderWidget 封装网络异步加载组件
/// 可以设置加载时的loading，没有数据时的空页面，网络加载失败的错误页面
/// 使用：
/// 可以使用一个类实现接口方法（例如SilFutureBuilderInterfaceInstanceDefault），定义app的loading、空页面、网络错误页面
/// 也可以在单个页面，重写方法，自定义当前的loading、空页面、网络错误页面
class SilFutureBuilderWidgetDemo extends StatefulWidget {
const SilFutureBuilderWidgetDemo({Key? key}) : super(key: key);

@override
State<SilFutureBuilderWidgetDemo> createState() =>
_SilFutureBuilderWidgetDemoState();
}

class _SilFutureBuilderWidgetDemoState extends State<SilFutureBuilderWidgetDemo>
with SilFutureBuilderInterfaceInstanceDefault {
// 使用with关键字，可以使用SilFutureBuilderInterfaceInstanceDefault中的loading、空页面、网络错误页面实现方法，就可以统一设置，不用每个页面都进行设置了

var _future = null;
List _datas = [];

@override
void initState() {
super.initState();
_future = api_new_apps(); // 接口
}

/// 模拟网络接口
api_new_apps() {
return Future.delayed(Duration(milliseconds: 300), () {
return ['微博', '微信', 'QQ'];
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SilFutureBuilderWidget(
future: _future,
mainWidget: (value) {
_datas = value;
return mainWidget();
},
reloadFunc: () {
setState(() {
_future = api_new_apps();
});
},
interface: this // 如果默认的页面不符合app，可以实现接口，自定义loading、空页面、网络错误页面
),
);
}

mainWidget() {
return ListView.separated(
padding: EdgeInsets.symmetric(vertical: 20),
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {},
child: Container(
height: 50,
alignment: Alignment.center,
child: SilText(_datas[index]),
),
);
},
separatorBuilder: (context, index) {
return Padding(padding: EdgeInsets.only(top: 16));
},
itemCount: _datas.length);
}

/// 单个页面，重写方法，自定义当前的网络错误页面
@override
Widget netErrorWidget({void Function()? reloadFunc}) {
return SilNetErrorWidget(reloadFunc: reloadFunc, prompt: 'netErrorWidget');
}

/// 单个页面，重写方法，自定义当前的空页面
@override
Widget noDataWidget(
{RefreshController? emptyRefreshController,
void Function()? reloadFunc}) {
return SilEmptyDataWidget(reloadFunc: reloadFunc);
}
}
copied to clipboard
三、SilSmartRefresherWidget 封装刷新加载组件
/// SilSmartRefresherWidget 封装刷新加载组件
/// 在SilSmartRefresherWidget的基础上，将刷新处理加了进去，使用时可以只关心接口和ListItem
/// 使用：
/// 如果使用默认组件设置，只需要返回一个接口和列表
/// 也可以用with混合的方式，将app的loading、空页面、网络错误页面、刷新指示器header和footer、是否加载结束设置好
/// 也可以在单个页面，实现SilSmartRefresherInterface的方法，实现单个页面自定义
class SilSmartRefresherWidgetDemo extends StatefulWidget {
const SilSmartRefresherWidgetDemo({Key? key}) : super(key: key);

@override
State<SilSmartRefresherWidgetDemo> createState() =>
_SilSmartRefresherWidgetDemoState();
}

class _SilSmartRefresherWidgetDemoState extends State<SilSmartRefresherWidgetDemo>
with SilFutureBuilderInterfaceInstanceDefault
implements SilSmartRefresherInterface {
List _datas = [];
late RefreshController _refreshController;

@override
void initState() {
super.initState();

_refreshController = RefreshController(initialRefresh: false);
}

/// 模拟网络接口
api_new_apps({int? page}) {
return Future.delayed(Duration(milliseconds: 300), () {
return ['微博', '微信', 'QQ'];
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SilSmartRefresherWidget(
childBuild: (context, data) {
_datas = data;
return contentWidget(context);
},
loadDataFuture: ({page, manuallyRefresh}) {
return api_new_apps(page: page);
},
refreshController: _refreshController,
isShowFooterNoData: true,
interface: this,
),
);
}

Widget contentWidget(BuildContext context) {
return ListView.separated(
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {},
child: Container(
height: 50,
alignment: Alignment.center,
child: SilText(_datas[index]),
),
);
},
separatorBuilder: (context, index) {
return Padding(padding: EdgeInsets.only(top: 16));
},
itemCount: _datas.length);
}

/// 单个页面，重写方法，自定义当前的网络错误页面
@override
Widget netErrorWidget({void Function()? reloadFunc}) {
return SilNetErrorWidget(reloadFunc: reloadFunc, prompt: 'netErrorWidget');
}

/// 单个页面，重写方法，自定义当前的空页面
@override
Widget noDataWidget(
{RefreshController? emptyRefreshController,
void Function()? reloadFunc}) {
return SilEmptyDataWidget(reloadFunc: reloadFunc);
}

@override
bool noMoreData({required result, required int loadedDataNum}) {
if (result.data == null) {
return true;
}
return false;
}

@override
Widget refresherFooterWidget() {
return ClassicFooter();
}

@override
Widget refresherHeaderWidget() {
return ClassicHeader();
}
}

copied to clipboard
Additional information #
Author: Silence
Mail: silence9685@163.com

Files In This Product: