Flutter基础组件库插件sil_base_widget_package的使用

Features

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

Getting started

dependencies:
  sil_base_widget_package:
    git:
      url: http://gitlab.changshaxiemeng.com/xiemeng/fultter/flutter/Sil_alert_dialog_package
      ref: laster

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,
    ),
  );
}

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);
    });
}

二、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);
  }
}

三、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();
  }
}

Additional information

Author: Silence

Mail: silence9685@163.com